\n ),\n stopPropagation: true,\n },\n {\n multiField: true,\n key: \"product\",\n multiFieldData: [\n {\n attribute: \"name\",\n },\n {\n attribute: \"sku\",\n },\n ],\n html: `\n {{0}}
\n SKU: {{2}}
\n `,\n label: \"Product\",\n minWidth: \"200px\",\n },\n {\n key: \"status\",\n attribute: \"status\",\n label: \"Status\",\n chip: true,\n chipColor: {\n Inactive: [red[50], red[200]],\n Active: [green[50], green[200]],\n },\n },\n { attribute: \"category\", label: \"Category\" },\n { attribute: \"stock\", label: \"Stock\", sortable: true, numeric: true },\n {\n key: \"price\",\n label: \"Price\",\n arrayAttribute: \"prices\",\n childAttribute: \"amount\",\n childAttribute2: \"currency\",\n childLabelAttribute: \"tag\",\n childActions: { delete: true, edit: true, add: true },\n numeric: true,\n price: true,\n },\n ];\n\n const handleRowClick = (event, item) => {\n if (item.id === selected.id) {\n setSelected({});\n return;\n }\n setSelected(item);\n };\n\n const handleAction = (event, key) => {};\n\n const handleRequestSort = (event, property) => {\n if (orderBy !== property) {\n setOrder(\"asc\");\n setOrderBy(property);\n return;\n }\n\n switch (order) {\n case \"asc\":\n setOrder(\"desc\");\n break;\n case \"desc\":\n setOrder(\"asc\");\n setOrderBy(\"\");\n break;\n default:\n break;\n }\n };\n\n const handleUniversalFilterChange = (event) => {\n setUniversalFilter(event.target.value);\n };\n\n const handlePageChange = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleRowsPerPageChange = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const handleNestedAction = (event, type, item, id) => {};\n\n const handleNestedFieldChange = (parentId, id, attribute, value) => {};\n\n useEffect(() => {\n const getData = () => {\n // Fetch data with filters\n };\n\n getData();\n }, [universalFilter, order, orderBy, rowsPerPage, page, filters]);\n\n return (\n `asc`,
`desc` |\n| orderBy | `string` | `id` | Attribute to sort column by |\n| loading | `bool` | `false` | Whether to display loading Backdrop component |\n| page | `number` | `1` | Current page |\n| totalCount | `number` | `undefined` | Total result count |\n| rowsPerPage | `number` | `10` | Number of rows per page |\n| selected | `array` | `[]` | Selected row |\n| descriptorAttribute | `string` | undefined | Attributed used to display descriptor for selected row in toolbar |\n| handleRowClick | `func` | `() => {}` | Method to handle row click event |\n| handleRequestSort | `func` | `() => {}` | Method to handle column sort click |\n| handlePageChange | `func` | `undefined` | Method to handle page change |\n| handleRowsPerPageChange | `func` | `undefined` | Method to handle rows per page change |\n| handleUniversalFilterChange | `func` | `() => {}` | Method to handle universal filter onChange event |\n| handleDateChange | `func` | `() => {}` | Method to handle date changes in date filters |\n| handleActionClick | `func` | `() => {}` | Method to handle table action click |\n| handleNestedAction | `func` | `() => {}` | Method to handle action click within a nested table in a row |\n| handleNestedFieldChange | `func` | `() => {}` | Method to handle nested field onChange event |\n| nestedRowAction | `object` | `{}` | Object indicating the actions available for each nested row. Possible actions include `add` or `edit`. Object needs to be of the form `{ [nestedRowIdentifier]: { add: true, edit: true } }` |\n| date | `string` | undefined | Filter dates. Must be in the form yyyy-MM-dd |\n| dates | `object` | undefined | Filter dates. Must be in the form `{ from: \"yyyy-MM-dd\", to: \"yyyy-MM-dd\" }` |\n| actionButtons | `array` | `[\"create\", \"edit\", \"delete\", \"filter\"]` | Actions to include in table |\n| showToolbar | `bool` | `true` | Whether to show the toolbar |\n| collapsible | `bool` | `false` | Whether each row should be collapsible |\n| collapseContent | `array` | `null` | Array of content for each collapsible row. Index of this array should correspond to index of rows. The collapse content for `rows[0]` should be `collapseContent[0]`. Default collapse content is a table. |\n| collapseHeaders | `array` | `[]` | Headers for default table within collapse content. Required if `collapsible = true` and `collapseContent` prop is not passed |\n| openRows | `object` | `{}` | Object to indicate which collapsible rows should be open. Object should be of the form `{ [row[identifier]]: true }` |\n| identifier | `string` | `id` | Attribute used as row identifier |\n| handleCollapseIconClick | `func` | `() => {}` | Method to handle collapse icon click event |\n| disableRowClick | `bool` | `false` | Whether to ignore click event on row |\n| disableSelection | `bool` | `false` | Makes rows unselectable |\n| selectibleRows | `array` | `null` | Manually define the selectible rows. Array should contain the row identifiers |\n| refreshBadgeCount | `number` | `0` | Badge count for refresh button. This can be used to indicate whether the table has pending unfetched data |\n\n## Header Props\n\n| Prop | Type | Default | Description |\n| ------------------------ | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| key | `string` | `attribute` | Attribute used to determine row key |\n| attribute | `string` | `undefined` | Attribute used to determine cell content |\n| label | `string` | `undefined` | Header label |\n| multiField | `bool` | `undefined` | Whether the cell should display content from multiple attributes. Best used with `data` and `html` props. |\n| multiFieldData | `array` | `undefined` | Array of attributes used for multiField content. Required if `multiField = true`. Array should be of the form `[{ attribute: \"name\" }]` |\n| html | `string` | `undefined` | HTML code for displaying content. Attribute will be substituted in for `{{0}}`. If used with `multiField`, `data` attributes will be substituted in for `{{index}}`, where index is the position index of the `data` array |\n| chip | `bool` | `undefined` | If true, column will contain a Material UI Chip populated with `attribute`. The `color` prop can be used to determine the Chip's color |\n| chipColor | `object` | `undefined` | Used with `chip`. Object of the form `{ [option]: [bgColor, borderColor] }` |\n| collapse | `bool` | `undefined` | If true, column will contain a collapse icon |\n| checkbox | `bool` | `undefined` | If true, column will contain a Material UI Checkbox component that is controlled by whether the row is selected |\n| actions | `array` | `undefined` | Array containing possible actions for each row. Should be of the form `{ id: \"cancel\", icon: