Cirrus Table Component
A set of recommended design rules and reusable React components to create tables of data quickly for specific workflow needs.
They should help customers find, view, organize and interact with their data in easy and convenient ways. The interface should disappear so that retailers can focus on the job at hand.
First, make sure you have been through the install steps steps required to add Flame in your application. Although it's not required to have Flame installed to use Logo, you will need to install its peer dependencies.
If using Yarn:
``sh`
yarn add @lightspeed/cirrus-table
Or using npm:
`sh`
npm i -S @lightspeed/cirrus-table
| Component Name | styled-system props |
| -------------- | ----------------------------------------------------------------------------------------------------- |
| Td | height |
| | width |
| | space |
| | fontSize |
| | textAlign |
| | color |
| Th | color |
| | height |
| | width |
| | space |
| | display |
| | alignItems, justifyContent |
| | fontSize |
| Tr | color |
| | space |
####
| ) | |||
|---|---|---|---|---|
| ). | . It comes with a pre-formatted styles for a no data state.bool | If true, the "back" pager button is disabled |bool | If true, the "forward" pager button is disabled |func | Callback function attached to the the "forward" pager button |func | Callback function attached to the the "back" pager button |any | Element will be added to the front of the Pager button group |TableActions.Context and Actions`jsx``jsx`TableActions.FilterPanelProviderTableActions.Dropdownfunc | Callback function that will receive in parameters the currently selected array of filters |string | The initial search term. If using TableActions.SearchBar, it'll automatically use the initialSearchTerm as it's value |Array<{key:string, value: any, label: string}> | The initial filters for the table actions. See PagerTable on how to set initialFilters properly |ReactNode | The content that will be used within dropdowns. Primarely used to have a single point of entry for dropdown content used by the search bar dropdown and the filter tag dropdowns |`jsx`TableActions.ActionBarReactNode | Render slot the left. Usually, you will want to add you search bar and dropdown here |ReactNode | Render slot for right. The pager should be here |ReactNode | |`jsx`TableActions.SearchBaronFilterChange to be executed.string | Text that appears on the search button |string | Text for title attribute of the search button |string | Placeholder text that appears on the search input |bool | Set to true to disable search input and search button |`jsx`TableActions.FilterTagListerTableActions.FilterPanelProvider.ReactNode | (Optional) Override of the provider's renderDropdownContent |ReactNode | Width of the dropdown |ReactNode | |`jsxstatus as an object keyTableActions.DropdownSection will be rendered when clickingTableActions.FilterTagLister`TableActions.DropdownMenuTableActions.Dropdown acquired from the provider.ReactNode | (Optional) Override of the provider's renderDropdownContent |ReactNode | Width of the dropdown |ReactNode | |`jsxTableActions.DropdownSection will be rendered when clicking on the`TableActions.DropdownTableActions.Dropdown. It'll render whatever is passed in as is, with the exception of TableActions.DropdownSection.TableActions.DropdownSection is detected, that component will instead output a clickable menu item. When clicked, the dropdown view will automatically swap to render out the given TableActions.DropdownSection children elements instead.string | Text that appears on the "back" button within a details view. Automatically hidden when rendered within a tag. |TableActions.DropdownSectionstring | Text that appears on the list view of the dropdown |string | Identifier for the section. For syncing the rendering of a section to a given tag |ReactNode | |TableActions.DropdownTitleTableActions.DropdownActionsTableActions.DropdownDividerTableActions.DropdownButtonLinkTableActions.CheckboxGroupArray<{ label: string, value: string}> | Config object to generate checkboxes. Simply pass in the label and the associated value |string | Identifier for the filter. Use this to bind the child functions to the appropriate filter key |Child function ReactNode | Accepts a child function. It forwards an object with two following functions: undoChanges and applyFilter. undoChanges will clear the internal state of the checkbox group but not trigger an actual filter change. applyFilter accepts either a string to be applied as the label for a given tag or a callback function that sends the selected items in parameter and expects a string in return |TableActions.RadioGroupArray<{ label: string, value: string}> | Config object to generate radios. Simply pass in the label and the associated value |string | Identifier for the filter. Use this to bind the child functions to the appropriate filter key |Child function ReactNode | Accepts a child function. It forwards an object with two following functions: undoChanges and applyFilter. undoChanges will clear the internal state of the radio group but not trigger an actual filter change. applyFilter accepts either a string to be applied as the label for a given tag or a callback function that sends the selected items in parameter and expects a string in return |SortButton component and a pre-built Th component that you can slide into the appropriate spot of the table.`jsx``jsxascdesc`unsorted -> ascending -> descendingdirection | string | The direction of the arrow for sorting |direction | string | The direction of the arrow for sorting |onClick | function | Good ol' function |`jsx`userBatchSelect hook is used to track what items have been selected.useBatchSelect accepts a configuration object`jsx`useBatchSelect will use that data to appropriately track what items are selected or not. useBatchSelect will NOT mutate the data |useBatchSelect will only keep track of the id key within the data object. |id (or whatever unique indentifier). By default, this field is an empty array. |useBatchSelect returns the following variables:useBatchSelect returns the following functionsselectedItems list. |selectedItems list. |selectedItems list. |selectedItems list. |SelectedItems list. |SelectedItems list. | that handles adding the initial checkbox column and swapping out the table header row to use an action group when items are selected. and handles the logic of replacing table headers with a when an item is selected.itemsSelectedCount | number | Quantity of items selected. |selectedItemsText | ReactNode | The text or element to appear right beside the checkbox when at least one item is selected. |innerGroup | ReactNode | Slot to render elements to be attached to the right of the checkbox addon |outerGroup | ReactNode | Slot to render elements outside of the checkbox addon group. |checkboxProps | HTMLCheckboxElement | Same properties as a regular cirrus Checkbox |children | ReactNode | Typically, we put the table header ( or ) elements here |selectedItemsText | ReactNode | The text or element to appear right beside the checkbox when at least one item is selected. |innerGroup | ReactNode | Slot to render elements to be attached to the right of the checkbox addon |outerGroup | ReactNode | Slot to render elements outside of the checkbox addon group. |checked | boolean | - |indeterminate | boolean | - |onChange | boolean | Event handler attached on the Checkbox |children | ReactNode | Typically, we put the table header ( or ) elements here | that injects a checkbox in the first . Use this component when you do not want to bother with adjusting padding and margins to match specs.checkboxProps | HTMLCheckboxElement | Same properties as a regular cirrus Checkbox |...restProps | Tr | Same properties as the Tr component |title | string | The text content of the dropdown button |children | ReactNode | What will be rendered within the dropdown menu when the dropdown button is clicked. BatchSelect. Dropdown can also take a child function. Destructuring it will give back a toggleOpen function to programatically close the menu. |`jsx`
element to be used within the dropdown.`jsx` |