<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@datashaper/react](./react.md)

## react package

## Enumerations

|  Enumeration | Description |
|  --- | --- |
|  [DisplayOrder](./react.displayorder.md) |  |
|  [StatsColumnType](./react.statscolumntype.md) |  |

## Functions

|  Function | Description |
|  --- | --- |
|  [checkedItemsCommand(list, checked, onCheckChange, props)](./react.checkeditemscommand.md) | Constructs a command for listing out items with checks |
|  [downloadCommand(table, downloadFilename, props)](./react.downloadcommand.md) | Constructs a download command. When clicked, will save the current table to a csv. |
|  [tableMenuCommand(tables, selectedKey, onChange, props)](./react.tablemenucommand.md) | Displays a table name along with a dropdown menu for selection of different tables. |
|  [useCellClickhandler(clickable, onColumnClick)](./react.usecellclickhandler.md) |  |
|  [useCellDimensions(column, considerCompactMode)](./react.usecelldimensions.md) |  |
|  [useCellDropdownSelectHandler(clickable, onOptionSelect)](./react.usecelldropdownselecthandler.md) |  |
|  [useColumnNamesList(table, columns)](./react.usecolumnnameslist.md) | Creates a list of column names for the table. If there are no columns supplied it will use the list from the table itself. Otherwise it will use the provided columns under the assumption the user has configured them as desired. |
|  [useColumns(table, metadata, columns, onColumnHeaderClick, onSort, options, virtualColumns)](./react.usecolumns.md) | Overlays a number of special features onto the IColumn objects for a table. This includes overridden renderers to support our sorting, selection, and data visualization. |
|  [useColumnStyles(clickable, separator)](./react.usecolumnstyles.md) |  |
|  [useDataTable(id, workflow, existingTable)](./react.usedatatable.md) |  |
|  [useDetailsHeaderRenderer()](./react.usedetailsheaderrenderer.md) | Overrides the default details header rendering so we can inject customization |
|  [useDetailsListStyles(isHeaderFixed, features, styles, hasColumnClick, compact)](./react.usedetailsliststyles.md) | Create a DetailsHeader style with enough height to handle the options we've turned on. Each one requires a small amount of vertical space that stacks up. |
|  [useFormattedNumber(value, formatter)](./react.useformattednumber.md) |  |
|  [useGroupHeaderRenderer(table, computedMetadata, groupHeaderFunction, lazyLoadGroups)](./react.usegroupheaderrenderer.md) | Overrides the default group header rendering so we can inject customization |
|  [useHandleFilesUpload(acceptedFileTypes, handleCollection)](./react.usehandlefilesupload.md) |  |
|  [useHandleStepOutputChanged(workflow)](./react.usehandlestepoutputchanged.md) | This hooks handles managing a step's output within the workflow. This hook assumes that each step will have a single output, which will become an invariant we expand upon in the future. |
|  [useHandleStepSave(workflow)](./react.usehandlestepsave.md) |  |
|  [useHeaderCommandBarDefaults(props, far, colors)](./react.useheadercommandbardefaults.md) | Helper to create the props necessary for the default inverted management bar. Basic colors can be customized, but note that if you do not want an always-inverted bar like that used in the DataShaper webapp, you may want to just tweak the Fluent styles as normal. |
|  [useIncrementingColumnColorScale(meta)](./react.useincrementingcolumncolorscale.md) | Creates a thematic nominal color scale function that auto-increments for the numeric columns in a table. |
|  [useInputTableNames(workflow)](./react.useinputtablenames.md) | Creates a dropdown list of id-names from the tables in a store TODO: for any given step, we should only show the tables created \*prior\* to this step, potentially via an optional filter callback on store.list. As it is, whenever the store is updated all the table dropdowns get the results. |
|  [useManagementBarDefaults(props, colors)](./react.usemanagementbardefaults.md) | Helper to create the props necessary for the default inverted management bar. Basic colors can be customized, but note that if you do not want an always-inverted bar like that used in the DataShaper webapp, you may want to just tweak the Fluent styles as normal. |
|  [useOnCreateStep(save, selectOutput, dismissModal)](./react.useoncreatestep.md) |  |
|  [useOnDeleteStep(workflow)](./react.useondeletestep.md) |  |
|  [useOnEditStep(setStep, setStepIndex, showTableModal)](./react.useoneditstep.md) | A hook to get the onEditStep callback |
|  [useOnSaveStep(workflow)](./react.useonsavestep.md) |  |
|  [useOnUpdateStep(workflow)](./react.useonupdatestep.md) |  |
|  [useReifiedTable(table)](./react.usereifiedtable.md) |  |
|  [useSlicedTable(table, offset, limit)](./react.useslicedtable.md) |  |
|  [useSortedGroups(table, column, sort, entries)](./react.usesortedgroups.md) | Sort top level group headers if the table is grouped, there isn't any column sorted or if the respective column is sorted |
|  [useSortedTable(table, column, sort)](./react.usesortedtable.md) |  |
|  [useSortHandling(allowSorting, defaultSortColumn, defaultSortDirection)](./react.usesorthandling.md) |  |
|  [useStepOutputs(workflow)](./react.usestepoutputs.md) | create a parallel array of output names for the steps |
|  [useStripedRowsRenderer(striped, columnBorders)](./react.usestripedrowsrenderer.md) |  |
|  [useSubsetTable(table, columns)](./react.usesubsettable.md) |  |
|  [useWorkflow(input, inputs)](./react.useworkflow.md) |  |
|  [useWorkflowListener(workflow, setWorkflow)](./react.useworkflowlistener.md) |  |
|  [useWorkflowOutputListener(workflow, setOutput)](./react.useworkflowoutputlistener.md) |  |
|  [useWorkflowSteps(workflow, order)](./react.useworkflowsteps.md) | Gets the workflow processing steps |
|  [visibleColumnsCommand(table, columns, onCheckChange, props)](./react.visiblecolumnscommand.md) | Constructs a visible columns command. This is a dropdown button that lists all of the columns in a table, with checks next to the visible ones. |

## Interfaces

|  Interface | Description |
|  --- | --- |
|  [ArqueroDetailsListProps](./react.arquerodetailslistprops.md) |  |
|  [ArqueroTableHeaderProps](./react.arquerotableheaderprops.md) |  |
|  [ArqueroTableHeaderStyles](./react.arquerotableheaderstyles.md) |  |
|  [ColumnOptions](./react.columnoptions.md) |  |
|  [DetailsListFeatures](./react.detailslistfeatures.md) |  |
|  [DropzoneProps](./react.dropzoneprops.md) |  |
|  [GroupHeaderProps](./react.groupheaderprops.md) |  |
|  [GuidanceProps](./react.guidanceprops.md) |  |
|  [HistoryButtonProps](./react.historybuttonprops.md) |  |
|  [HistoryPanelProps](./react.historypanelprops.md) |  |
|  [ProjectManagementCommandBarProps](./react.projectmanagementcommandbarprops.md) |  |
|  [SortParameters](./react.sortparameters.md) |  |
|  [StepCardProps](./react.stepcardprops.md) |  |
|  [StepComponentProps](./react.stepcomponentprops.md) |  |
|  [StepDescriptionProps](./react.stepdescriptionprops.md) |  |
|  [StepHistoryListProps](./react.stephistorylistprops.md) |  |
|  [StepListProps](./react.steplistprops.md) |  |
|  [StepSelectorProps](./react.stepselectorprops.md) |  |
|  [TableCommandsProps](./react.tablecommandsprops.md) |  |
|  [TableListProps](./react.tablelistprops.md) |  |
|  [TableTransformProps](./react.tabletransformprops.md) |  |
|  [TransformModalProps](./react.transformmodalprops.md) |  |

## Variables

|  Variable | Description |
|  --- | --- |
|  [ArqueroDetailsList](./react.arquerodetailslist.md) | Renders an arquero table using a fluent DetailsList. |
|  [ArqueroTableHeader](./react.arquerotableheader.md) |  |
|  [Dropzone](./react.dropzone.md) |  |
|  [GroupHeader](./react.groupheader.md) |  |
|  [Guidance](./react.guidance.md) |  |
|  [HistoryButton](./react.historybutton.md) |  |
|  [HistoryIcon](./react.historyicon.md) |  |
|  [HistoryPanel](./react.historypanel.md) |  |
|  [ProjectManagementCommandBar](./react.projectmanagementcommandbar.md) |  |
|  [StepCard](./react.stepcard.md) |  |
|  [StepComponent](./react.stepcomponent.md) | Let's us render the Steps in a loop while memoing all the functions |
|  [StepDescription](./react.stepdescription.md) | Let's us render the Steps in a loop while memoing all the functions |
|  [StepHistoryList](./react.stephistorylist.md) |  |
|  [StepList](./react.steplist.md) |  |
|  [StepSelector](./react.stepselector.md) | Creates a custom step selection dropdown. If "showButton" is true, a + icon will appear next to the dropdown, and onChange will only fire when it is clicked. |
|  [TableCommands](./react.tablecommands.md) |  |
|  [TableList](./react.tablelist.md) |  |
|  [TableTransformModal](./react.tabletransformmodal.md) |  |
|  [Tooltip](./react.tooltip.md) |  |

## Type Aliases

|  Type Alias | Description |
|  --- | --- |
|  [ColumnClickFunction](./react.columnclickfunction.md) |  |
|  [ColumnRenderFunction](./react.columnrenderfunction.md) |  |
|  [DropdownOptionSelect](./react.dropdownoptionselect.md) |  |
|  [GroupHeaderFunction](./react.groupheaderfunction.md) |  |
|  [MetadataClickFunction](./react.metadataclickfunction.md) |  |
|  [SaveMetadataFunction](./react.savemetadatafunction.md) |  |
|  [TooltipProps](./react.tooltipprops.md) |  |

