@redsift/design-system-legacy 8.0.1 → 8.0.2

package/src/components/Table/readme.md

@@ -1,2190 +0,0 @@
-### Notes
-
-- This component has been built based on https://github.com/tannerlinsley/react-table (v7), which is the same library as the ui-kit `<Table />` was built on.
-- **PLEASE NOTE:** the following may need to be added to the app you are using Table with xOverflow:
-  `import "simplebar/dist/simplebar.min.css";`
-
-### Table Props
-
-|           Prop            |  Default  |                                                                                                                                                                                                                    Options |
-| :-----------------------: | :-------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-|          columns          |           |                                                                                                                                                                                       Array, See React Table for structure |
-|           data            |           |                                                                                                                                                                                       Array, See React Table for structure |
-|         bordered          |   false   |                                                                                                                                                                                                 If true, adds cell borders |
-|   iconButtonsHoverColor   | #00000019 |                                                                                                                                                         Sets a special hover background color when hovering an icon button |
-|  iconButtonsActiveColor   | #00000032 |                                                                                                                                                         Sets a special hover background color when clicking an icon button |
-| primaryButtonsHoverColor  | #00000019 |                                                                                                                                                       Sets a special hover background color when hovering a primary button |
-| primaryButtonsActiveColor | #00000032 |                                                                                                                                                       Sets a special hover background color when clicking a primary button |
-|       noPagination        |   false   |                                                                                                                                                                                               If true, disables pagination |
-|     onSelectionChange     | Function  |                                                                                                                           If true, adds checkboxes. Returns the `_id` for the data entries of the currently selected items |
-|      onSearchChange       | Function  |                                                                                                                                                                              Returns the current string of the Searchfield |
-|         onDelete          | Function  |                                                                                                                                 If present, enables the delete function. Returns an array of `_id` for the items to delete |
-|     onPageSizeChange      | Function  |                                                                                                                                        If present, enables page size change detection. Returns a number with new page size |
-|       onPageChange        | Function  |                                                                                                                              If present, enables page index change detection. Returns a number with the current index page |
-|     showDeleteColumn      |   false   |                                                                                                                                                                                       If true, shows the delete action row |
-|       gotoPageIndex       |   null    |                                                                                                                                                                                 If !null, force table to nav to index page |
-|      onPreviousPage       | function  |                                                                                                                                                                                           Event handler for onPreviousPage |
-|        onNextPage         | function  |                                                                                                                                                                                               Event handler for onNextPage |
-|      selectHighlight      |           |                                                                                                                                                                                Specify a colour to highlight selected rows |
-|       checkboxProps       |           |                                                                                                                                                                                               For customising the checkbox |
-|        inputProps         |           |                                                                                                                                                                                           For customising the input fields |
-|         searchID          |           |                                                                                                                                                                                Enables searching by specifying an accessor |
-|        searchLabel        |           |                                                                                                                                                                                                 Label for the search input |
-|           title           |           |                                                                                                                                                                                                                            |
-|        filterable         |           |                                                                                                                                                                                                 If true, enables filtering |
-|         sortable          |   true    |                                                                                                                                                                                            If true, enables column sorting |
-|      staticPageSize       |           |                                                                                                                                                                                      Set a static Page Size for pagination |
-|    CustomFilterButton     |           |                                                                                                                                       Custom filter button. Requires `filterable` prop. Displays just before CustomActions |
-|       CustomActions       |           |                                                                                                                                                                                                      Custom action buttons |
-|   CustomSelectedActions   |           |                                                                                                       Custom action buttons that are only usable when items are selected. Make sure to disable them when selection is null |
-|       AddComponent        |           |                                                              Custom Component that is visible when the add button is pressed, receiving a `closeAddComponent` prop to close the AddComponent when done (i.e. cancel, done) |
-|   CustomHeaderComponent   |           |                                                                                                                                                   Custom Component that sits underneath the table header/title/actions row |
-|           color           |           |                                                                                                                                                                             Is used to define the colour of the pagination |
-|      rowSubComponent      |           |                                                                                             Custom Component that receives { row } as props, that enables expandable rows that show a sub-component (triggered by chevron) |
-|  rowSubComponentEditMode  |   false   |                                                                                                                                       Changes the rowSubComponent to be triggered by an edit button, rather than a chevron |
-|       customOnEdit        |           |                                                                                                                                                                             Function triggered when edit button is pressed |
-|        rowSpacing         |    10     |                                                                                                              Space each row, and add a solid grey border with radius 4px to each. Set the spacing by passing in an integer |
-|       sortableRows        |           |                                                                                                                                          Make each row sortable, with sort function handled in internal state of the table |
-|          onSort           |           |                                                                                                 Custom sorting function to override table's own `handleSortGeneric` function. Use this for extra actions such as api calls |
-|    onRowsLengthChange     | Function  |                                                                                                                                                                         Returns the current number of rows being displayed |
-|         footerRow         |           |                                                                                                                                                  Additional row displayed at the end of the table, usually used as summary |
-|       defaultSorted       |           |                                                                                              Object in a single item array, e.g. `[{ id: 'firstName', desc: false }]`. The id is the column to sort by, desc denotes order |
-|      defaultPageSize      |    10     |                                                                                                                                                              Number that must be one of the following: 10, 20, 30, 40, 50. |
-|         xOverflow         |           |          If using many columns, set an `xOverflow` prop to determine the width of the first column. A permanent scrollbar will appear. In addition, you may need to `import "simplebar/dist/simplebar.min.css"` in the app |
-|        xOverflowBg        |  `white`  |                                                                                                                                                       Set the background colour of the first column when using `xOverflow` |
-|          locales          |           | Provides multilingual support, by passing in an object such as { search, show-search, toggle-filter, add, delete-selected, select, edit, clear-search, remove, cancel, delete, delete-select-are-you-sure, confirm, rows } |
-|  smallTableButtonDesign   |           |                                                                                                                                  Boolean (true) to force small layout where search bar always use the entire table's width |
-|          ...rest          |           |                                                                                                                                                                                       Add anything extra to the html table |
-
-### Custom Data Props (see React Table for the builtins)
-
-|       Prop       |                                                                 Info |
-| :--------------: | -------------------------------------------------------------------: |
-|     isNumber     |                               If true, aligns cell text to the right |
-|       \_id       |                       Number - Required when using onSelectionChange |
-|    \_noSelect    |     If true, disables the selection and deletion options for the row |
-| \_customRowColor |                                        Sets an individual row colour |
-|    \_onClick     |                            Function - makes the entire row clickable |
-|  CustomNoSelect  | React Component - shows a custom icon instead of a disabled checkbox |
-
-### Custom Column Props (see React Table for the builtins)
-
-|      Prop      |                                                                                                                                                                                  Info |
-| :------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-|     filter     |                                                                                                                                  Define a custom filter. Current support: 'fuzzyText' |
-|      size      | Sets a fixed size for the column. Sets as pixels if an integer, i.e. size={60} would equal 60px wide. Alternatively, specify the unit and measurement as a string, i.e. size={'5rem'} |
-|    sortType    |                                                                                                      Define a custom sorting function. Sort by a property of an accessor, for example |
-| disableSortBy  |                                                                                                                                Boolean (true). Disable sorting on a particular column |
-| disableFilters |                                                                                                                              Boolean (true). Disable filtering on a particular column |
-
-### Column sort types
-
-More details at: https://react-table.tanstack.com/docs/api/useSortBy#column-options
-
-- basic
-- datetime
-- alphanumeric (default)\*
-- Function(rowA: Row, rowB: Row, columnId: String, desc: Bool)
-
-If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest.
-
-\*Note: alphanumeric doesn't work well with boolean columns, you should `basic` instead.
-
-### Examples
-
-```js
-<Table
-  title="[Empty State] Table"
-  sortable={false}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[]}
-/>
-```
-
-```js
-<Table
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [Sort] Table"
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [Sort] Table - overflowing text"
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-      size: 60,
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "Alexander",
-      lastName: "Doe",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [Sort] [Exportable] Table"
-  color="#33b222"
-  iconButtonsHoverColor="#33b22219"
-  iconButtonsActiveColor="#33b22232"
-  export={{
-    filename: "sample-filename.csv",
-  }}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [Sort] [Exportable extended] Table"
-  color="#33b222"
-  iconButtonsHoverColor="#33b22219"
-  iconButtonsActiveColor="#33b22232"
-  export={{
-    filename: "sample-filename.csv",
-    headers: [
-      { key: "firstName", label: "First name" },
-      { key: "percent", label: "Percent %" },
-    ],
-    data: [
-      {
-        firstName: "John",
-        lastName: "Doe",
-        percent: "100%",
-      },
-      {
-        firstName: "James",
-        lastName: "Doe",
-      },
-    ],
-  }}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [Sort] [Exportable extended] Table"
-  color="#33b222"
-  iconButtonsHoverColor="#33b22219"
-  iconButtonsActiveColor="#33b22232"
-  export={{
-    filename: "sample-filename.csv",
-    headers: [
-      { key: "firstName", label: "First name" },
-      { key: "percent", label: "Percent %" },
-    ],
-    data: [
-      {
-        firstName: "John",
-        lastName: "Doe",
-        percent: "100%",
-      },
-      {
-        firstName: "James",
-        lastName: "Doe",
-      },
-    ],
-  }}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  defaultSorted={[{ id: "firstName", desc: false }]}
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [defaultSorted] Table"
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  bordered
-  noPagination
-  title="[Bordered] [Numbers] [Sort] [Footer] Table"
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Percent %",
-      accessor: "percent",
-      isNumber: true,
-      Footer: (row) => <span style={{ fontWeight: "bold" }}>{row.value}</span>,
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      percent: "100%",
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      percent: "4%",
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-    },
-  ]}
-  footerRow={{
-    percent: "100%",
-  }}
-/>
-```
-
-```js
-<Table
-  noPagination
-  color="#33b222"
-  iconButtonsHoverColor="#33b22219"
-  iconButtonsActiveColor="#33b22232"
-  title="[Select] [Sort] [Delete] [ClickableRow] Table"
-  onSelectionChange={(selection) => console.log("selected", selection)}
-  onDelete={(selection) => console.log("delete", selection)}
-  showDeleteColumn
-  selectHighlight="rgba(51, 178, 34,0.1)"
-  checkboxProps={{ color: "#33b222" }}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-  ]}
-  data={[
-    {
-      _id: 0,
-      _onClick: () => alert("click"),
-      firstName: "Click",
-      lastName: "Me",
-    },
-    {
-      _id: 1,
-      firstName: "Jane",
-      lastName: "Doe",
-    },
-    {
-      _id: 2,
-      firstName: "Jason",
-      lastName: "Doe",
-      _noSelect: true,
-    },
-    {
-      _id: 2,
-      firstName: "Custom",
-      lastName: "Doe",
-      _noSelect: true,
-      _customRowColor: "rgba(191, 85, 236, 0.5)",
-      CustomNoSelect: () => <div>🙃</div>,
-    },
-  ]}
-/>
-```
-
-```js
-import Button from "../Button/Button";
-<Table
-  searchID="firstName"
-  searchLabel="Search (first name)"
-  title="[Search] [Sort] [CustomActions] Table"
-  noPagination
-  CustomActions={() => <Button color="#02ac61">Custom Action</Button>}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-  ]}
-  data={[
-    {
-      _id: 0,
-      firstName: "John",
-      lastName: "Doe",
-    },
-    {
-      _id: 1,
-      firstName: "Jane",
-      lastName: "Doe",
-    },
-  ]}
-/>;
-```
-
-```js
-import Button from "../Button/Button";
-<Table
-  searchID="firstName"
-  searchLabel="Search (first name)"
-  title="[Search] [Sort] [CustomActions] [CustomPrimaryActions] Table"
-  noPagination
-  CustomActions={() => <Button color="#02ac61">Custom Action</Button>}
-  CustomPrimaryActions={() => (
-    <Button color="#02ac61">Custom Primary Action</Button>
-  )}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-  ]}
-  data={[
-    {
-      _id: 0,
-      firstName: "John",
-      lastName: "Doe",
-    },
-    {
-      _id: 1,
-      firstName: "Jane",
-      lastName: "Doe",
-    },
-  ]}
-/>;
-```
-
-```js
-import Button from "../Button/Button";
-<div style={{ display: "flex" }}>
-  <div style={{ width: "300px" }}>
-    <Table
-      searchID="firstName"
-      searchLabel="Search (first name)"
-      title="[Search] [Sort] Limited width table"
-      noPagination
-      columns={[
-        {
-          Header: "First Name",
-          accessor: "firstName",
-        },
-        {
-          Header: "Last Name",
-          accessor: "lastName",
-        },
-      ]}
-      data={[
-        {
-          _id: 0,
-          firstName: "John",
-          lastName: "Doe",
-        },
-        {
-          _id: 1,
-          firstName: "Jane",
-          lastName: "Doe",
-        },
-      ]}
-    />
-  </div>
-  <div style={{ flex: 1, marginLeft: 10 }}>
-    <Table
-      searchID="firstName"
-      searchLabel="Search (first name)"
-      title="[Search] [Sort] [CustomActions] [CustomSelectedActions] [smallTableButtonDesign] Limited width table"
-      noPagination
-      smallTableButtonDesign
-      onSelectionChange={(selection) => console.log("selected", selection)}
-      CustomActions={() => <Button color="#02ac61">Custom Action</Button>}
-      CustomPrimaryActions={() => (
-        <>
-          <Button color="#02ac61" outlined style={{ marginRight: "8px" }}>
-            Thumb up
-          </Button>
-          <Button color="#02ac61" outlined style={{ marginRight: "8px" }}>
-            Thumb down
-          </Button>
-        </>
-      )}
-      onDelete={(items) => console.log("items", items)}
-      columns={[
-        {
-          Header: "First Name",
-          accessor: "firstName",
-        },
-        {
-          Header: "Last Name",
-          accessor: "lastName",
-        },
-      ]}
-      data={[
-        {
-          _id: 0,
-          firstName: "John",
-          lastName: "Doe",
-        },
-        {
-          _id: 1,
-          firstName: "Jane",
-          lastName: "Doe",
-        },
-      ]}
-    />
-  </div>
-</div>;
-```
-
-```js
-import Button from "../Button/Button";
-<Table
-  searchID="firstName"
-  searchLabel="Search (first name)"
-  title="[Search] [Filterable] [CustomSelectedActions] [Sort] Table"
-  noPagination
-  filterable
-  color="#33b222"
-  iconButtonsHoverColor="#33b22219"
-  iconButtonsActiveColor="#33b22232"
-  onSelectionChange={(selection) => console.log("selected", selection)}
-  CustomSelectedActions={() => <Button color="#02ac61">Custom action</Button>}
-  columns={[
-    {
-      Header: "First Name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last Name",
-      accessor: "lastName",
-    },
-  ]}
-  data={[
-    {
-      _id: 0,
-      firstName: "John",
-      lastName: "Doe",
-    },
-    {
-      _id: 1,
-      firstName: "Jane",
-      lastName: "Doe",
-    },
-  ]}
-/>;
-```
-
-```js
-<Table
-  title="[Pagination Default] [Search] [Sort] Table"
-  searchID="name"
-  color="#33b222"
-  buttonsHoverColor="#33b22219"
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Number",
-      accessor: "number",
-      isNumber: true,
-    },
-  ]}
-  data={[
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-  ]}
-/>
-```
-
-```js
-import Button from "../Button/Button";
-import Input from "../Input/Input";
-<Table
-  title="[Pagination Static] [Search] [Filter] [Select] [Sort] [Add] [Size] Table"
-  searchID="name"
-  onSelectionChange={(selection) => console.log("selected", selection)}
-  color="#33b222"
-  iconButtonsHoverColor="#33b22219"
-  iconButtonsActiveColor="#33b22232"
-  primaryButtonsHoverColor="#268519"
-  primaryButtonsActiveColor="#1F7015"
-  staticPageSize={5}
-  filterable
-  AddComponent={({ closeAddComponent }) => {
-    return (
-      <div style={{ display: "flex", alignItems: "center" }} color="#02ac61">
-        <Input />
-        <Button
-          onClick={closeAddComponent}
-          flat
-          style={{ marginLeft: 10 }}
-          color="#222"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={() => {
-            alert("Added!");
-            closeAddComponent();
-          }}
-          style={{ marginLeft: 10 }}
-          color="#02ac61"
-        >
-          Add
-        </Button>
-      </div>
-    );
-  }}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Num",
-      accessor: "number",
-      isNumber: true,
-      size: 80,
-    },
-  ]}
-  data={[
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-  ]}
-/>;
-```
-
-```js
-import Button from "../Button/Button";
-<Table
-  title="[Sort] [Filter] [CustomFilterButton] Table"
-  color="#33b222"
-  buttonsHoverColor="#33b22219"
-  filterable
-  CustomFilterButton={(props) => (
-    <Button color="#33b222" onClick={props.onClick}>
-      Custom Filter Button
-    </Button>
-  )}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-      disableFilters: true,
-    },
-    {
-      Header: "Num",
-      accessor: "number",
-      isNumber: true,
-      size: 80,
-    },
-  ]}
-  data={[
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-  ]}
-/>;
-```
-
-```js
-import Button from "../Button/Button";
-import Input from "../Input/Input";
-import Typography from "../Typography/Typography";
-<Table
-  title="[Add] [CustomHeader] [Delete] [Expand] Table"
-  sortable={false}
-  onSelectionChange={(selection) => console.log("selected", selection)}
-  onDelete={() => {}}
-  CustomHeaderComponent={() => {
-    return (
-      <div>
-        <Typography size="h1">Custom header</Typography>
-      </div>
-    );
-  }}
-  AddComponent={({ closeAddComponent }) => {
-    return (
-      <div style={{ display: "flex", alignItems: "center" }} color="#02ac61">
-        <Input />
-        <Button
-          onClick={closeAddComponent}
-          flat
-          style={{ marginLeft: 10 }}
-          color="#222"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={() => {
-            alert("Added!");
-            closeAddComponent();
-          }}
-          style={{ marginLeft: 10 }}
-          color="#02ac61"
-        >
-          Add
-        </Button>
-      </div>
-    );
-  }}
-  rowSubComponent={({ row }) => (
-    <pre
-      style={{
-        fontSize: "10px",
-      }}
-    >
-      <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
-    </pre>
-  )}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Test",
-      info: "Hello",
-      _id: 1,
-    },
-    {
-      name: "Bob",
-      info: "32904",
-      _id: 2,
-    },
-  ]}
-/>;
-```
-
-```js
-<Table
-  title="[Editable] [DeleteColumn] Table"
-  sortable={false}
-  onDelete={(selection) => console.log("delete", selection)}
-  showDeleteColumn
-  rowSubComponentEditMode
-  rowSubComponent={({ row }) => (
-    <pre
-      style={{
-        fontSize: "10px",
-      }}
-    >
-      <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
-    </pre>
-  )}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Test",
-      info: "Hello",
-    },
-    {
-      name: "Bob",
-      info: "32904",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[Editable] Table"
-  sortable={false}
-  rowSubComponentEditMode
-  rowSubComponent={({ row }) => (
-    <pre
-      style={{
-        fontSize: "10px",
-      }}
-    >
-      <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
-    </pre>
-  )}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Test",
-      info: "Hello",
-    },
-    {
-      name: "Bob",
-      info: "32904",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[Editable] [customOnEdit] Table"
-  sortable={false}
-  customOnEdit={() => alert("[Editable] [customOnEdit] Table: customOnEdit")}
-  rowSubComponentEditMode
-  rowSubComponent={({ row }) => (
-    <pre
-      style={{
-        fontSize: "10px",
-      }}
-    >
-      <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
-    </pre>
-  )}
-  columns={[
-    {
-      Header: "Custom",
-      accessor: "name",
-    },
-    {
-      Header: "Edit",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Test",
-      info: "Hello",
-    },
-    {
-      name: "Bob",
-      info: "32904",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[Spaced Rows] Table (10px default)"
-  sortable={false}
-  rowSpacing
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Test",
-      info: "Hello",
-    },
-    {
-      name: "Bob",
-      info: "32904",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[Spaced Rows] Table (20px example)"
-  sortable={false}
-  rowSpacing={20}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Test",
-      info: "Hello",
-    },
-    {
-      name: "Bob",
-      info: "32904",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[Sortable Rows] Table"
-  sortableRows
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Row 1",
-      info: "Hello",
-    },
-    {
-      name: "Row 2",
-      info: "lalalal",
-    },
-    {
-      name: "Row 3",
-      info: "waaasssup",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[Sortable Rows] [onSort - custom function] [rowSpacing] Table"
-  sortableRows
-  onSort={() => {
-    alert("custom sorting function - could include api call");
-  }}
-  rowSpacing
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "Row 1",
-      info: "Hello",
-    },
-    {
-      name: "Row 2",
-      info: "lalalal",
-    },
-    {
-      name: "Row 3",
-      info: "waaasssup",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[onRowsLengthChange - custom function] Table"
-  searchID="name"
-  searchLabel="Search customer"
-  inputProps={{ color: "#02ac61" }}
-  onRowsLengthChange={(rowsLength) => console.log(rowsLength)}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={[
-    {
-      name: "John",
-      info: "Active",
-    },
-    {
-      name: "Mary",
-      info: "Inactive",
-    },
-    {
-      name: "Susan",
-      info: "Active",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[xOverflow - first column width = 200px] Table."
-  xOverflow={200}
-  noPadding
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-    {
-      Header: "Age",
-      accessor: "age",
-    },
-    {
-      Header: "Date of birth",
-      accessor: "dob",
-      size: 140,
-    },
-    {
-      Header: "Place of birth",
-      accessor: "place",
-      size: 160,
-    },
-    {
-      Header: "Email",
-      accessor: "email",
-      size: 250,
-    },
-    {
-      Header: "Music",
-      accessor: "music",
-      size: 200,
-    },
-  ]}
-  data={[
-    {
-      name: "John",
-      info: "Active",
-      age: 23,
-      dob: "11/04/1997",
-      place: "Redditch, U.K.",
-      email: "john23@hotmail.com",
-      music: "rock",
-    },
-    {
-      name: "Mary",
-      info: "Inactive",
-      age: 43,
-      dob: "18/03/1977",
-      place: "",
-      email: "contrary-mary@gmail.com",
-      music: "folk",
-    },
-    {
-      name: "Susan",
-      info: "Active",
-      age: 35,
-      dob: "13/12/1984",
-      place: "Detriot, U.S.A.",
-      email: "susie-q@gmail.co.uk",
-      music: "Jazz / funk",
-    },
-    {
-      name: "Jane",
-      info: "Active",
-      age: 17,
-      dob: "27/11/2002",
-      place: "Brixton, London, U.K.",
-      email: "janejaney@live.com",
-      music: "rock",
-    },
-    {
-      name: "Englebert",
-      info: "Active",
-      age: 73,
-      dob: "16/02/1947",
-      place: "Madras, India",
-      email: "mr_humperdinck@.whatever.com",
-      music: "ballroom",
-    },
-    {
-      name: "Eileen",
-      info: "Inactive",
-      age: 83,
-      dob: "03/01/1937",
-      place: "Birmingham, U.K.",
-      email: "comeon@.midnightrunners.com",
-      music: "popular",
-    },
-    {
-      name: "Dave",
-      info: "Inactive",
-      age: 32,
-      dob: "03/02/1988",
-      place: "Slough, U.K.",
-      email: "niceoned@.ve.co.uk",
-      music: "speed garage",
-    },
-    {
-      name: "John",
-      info: "Active",
-      age: 23,
-      dob: "11/04/1997",
-      place: "Redditch, U.K.",
-      email: "john23@hotmail.com",
-      music: "rock",
-    },
-    {
-      name: "Mary",
-      info: "Inactive",
-      age: 43,
-      dob: "18/03/1977",
-      place: "",
-      email: "contrary-mary@gmail.com",
-      music: "folk",
-    },
-    {
-      name: "Susan",
-      info: "Active",
-      age: 35,
-      dob: "13/12/1984",
-      place: "Detriot, U.S.A.",
-      email: "susie-q@gmail.co.uk",
-      music: "Jazz / funk",
-    },
-    {
-      name: "Jane",
-      info: "Active",
-      age: 17,
-      dob: "27/11/2002",
-      place: "Brixton, London, U.K.",
-      email: "janejaney@live.com",
-      music: "rock",
-    },
-    {
-      name: "Englebert",
-      info: "Active",
-      age: 73,
-      dob: "16/02/1947",
-      place: "Madras, India",
-      email: "mr_humperdinck@.whatever.com",
-      music: "ballroom",
-    },
-    {
-      name: "Eileen",
-      info: "Inactive",
-      age: 83,
-      dob: "03/01/1937",
-      place: "Birmingham, U.K.",
-      email: "comeon@.midnightrunners.com",
-      music: "popular",
-    },
-    {
-      name: "Dave",
-      info: "Inactive",
-      age: 32,
-      dob: "03/02/1988",
-      place: "Slough, U.K.",
-      email: "niceoned@.ve.co.uk",
-      music: "speed garage",
-    },
-    {
-      name: "John",
-      info: "Active",
-      age: 23,
-      dob: "11/04/1997",
-      place: "Redditch, U.K.",
-      email: "john23@hotmail.com",
-      music: "rock",
-    },
-    {
-      name: "Mary",
-      info: "Inactive",
-      age: 43,
-      dob: "18/03/1977",
-      place: "",
-      email: "contrary-mary@gmail.com",
-      music: "folk",
-    },
-    {
-      name: "Susan",
-      info: "Active",
-      age: 35,
-      dob: "13/12/1984",
-      place: "Detriot, U.S.A.",
-      email: "susie-q@gmail.co.uk",
-      music: "Jazz / funk",
-    },
-    {
-      name: "Jane",
-      info: "Active",
-      age: 17,
-      dob: "27/11/2002",
-      place: "Brixton, London, U.K.",
-      email: "janejaney@live.com",
-      music: "rock",
-    },
-    {
-      name: "Englebert",
-      info: "Active",
-      age: 73,
-      dob: "16/02/1947",
-      place: "Madras, India",
-      email: "mr_humperdinck@.whatever.com",
-      music: "ballroom",
-    },
-    {
-      name: "Eileen",
-      info: "Inactive",
-      age: 83,
-      dob: "03/01/1937",
-      place: "Birmingham, U.K.",
-      email: "comeon@.midnightrunners.com",
-      music: "popular",
-    },
-    {
-      name: "Dave",
-      info: "Inactive",
-      age: 32,
-      dob: "03/02/1988",
-      place: "Slough, U.K.",
-      email: "niceoned@.ve.co.uk",
-      music: "speed garage",
-    },
-  ]}
-/>
-```
-
-```js
-<Table
-  title="[sortType] - sort by property on cell accessor"
-  columns={[
-    {
-      Header: "First name",
-      accessor: "firstName",
-    },
-    {
-      Header: "Last name",
-      accessor: "lastName",
-    },
-    {
-      Header: "Stats",
-      accessor: "stats",
-      sortType: (a, b) => {
-        if (a.original.stats.average === b.original.stats.average) {
-          return a > b ? 1 : -1;
-        }
-        return a.original.stats.average > b.original.stats.average ? 1 : -1;
-      },
-      Cell: ({ cell, value }) => {
-        return <span>{value.average}</span>;
-      },
-    },
-  ]}
-  data={[
-    {
-      firstName: "John",
-      lastName: "Doe",
-      stats: {
-        average: "50%",
-        numbers: [50, 100, 0],
-      },
-    },
-    {
-      firstName: "Jane",
-      lastName: "Doe",
-      stats: {
-        average: "80%",
-        numbers: [60, 100, 80],
-      },
-    },
-    {
-      firstName: "James",
-      lastName: "Doe",
-      stats: {
-        average: "40%",
-        numbers: [80, 30, 10],
-      },
-    },
-  ]}
-/>
-```
-
-```js
-import Button from "../Button/Button";
-import Input from "../Input/Input";
-import Typography from "../Typography/Typography";
-
-const [data, setData] = React.useState([
-  {
-    name: "Test",
-    info: "Hello",
-    _id: 1,
-  },
-  {
-    name: "Bob",
-    info: "32904",
-    _id: 2,
-  },
-]);
-
-const addUser = () =>
-  setData((currentData) => [
-    ...currentData,
-    { name: "Frank", info: "Recently added", _id: currentData.length + 1 },
-  ]);
-
-<Table
-  title="[Add] [CustomAction] [Delete] [Dynamic data] Table"
-  sortable={false}
-  onSelectionChange={(selection) => console.log("selected", selection)}
-  onDelete={(ids) =>
-    setData((currentData) => currentData.filter((i) => !ids.includes(i._id)))
-  }
-  showDeleteColumn
-  CustomPrimaryActions={() => (
-    <Button onClick={addUser} lat style={{ marginRight: 8 }} color="#222">
-      Add new user
-    </Button>
-  )}
-  CustomHeaderComponent={() => {
-    return (
-      <div>
-        <Typography size="h1">Custom header</Typography>
-      </div>
-    );
-  }}
-  AddComponent={({ closeAddComponent }) => {
-    return (
-      <div style={{ display: "flex", alignItems: "center" }} color="#02ac61">
-        <Input />
-        <Button
-          onClick={closeAddComponent}
-          flat
-          style={{ marginLeft: 10 }}
-          color="#222"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={() => {
-            addUser();
-            closeAddComponent();
-          }}
-          style={{ marginLeft: 10 }}
-          color="#02ac61"
-        >
-          Add
-        </Button>
-      </div>
-    );
-  }}
-  rowSubComponent={({ row }) => (
-    <pre
-      style={{
-        fontSize: "10px",
-      }}
-    >
-      <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
-    </pre>
-  )}
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Info",
-      accessor: "info",
-    },
-  ]}
-  data={data}
-/>;
-```
-
-```js
-const [pageIndex, setPageIndex] = React.useState(0);
-
-const onPreviousPage = (page) => {
-  setPageIndex(page);
-};
-
-const onNextPage = (page) => {
-  setPageIndex(page);
-};
-
-return (
-  <Table
-    gotoPageIndex={pageIndex}
-    onPreviousPage={onPreviousPage}
-    onNextPage={onNextPage}
-    title="[gotoPageIndex] - Control page index manually"
-    columns={[
-      {
-        Header: "Name",
-        accessor: "name",
-      },
-      {
-        Header: "Num",
-        accessor: "number",
-        isNumber: true,
-        size: 80,
-      },
-    ]}
-    data={[
-      {
-        name: "Apple",
-        number: "1",
-      },
-      {
-        name: "Orange",
-        number: "3",
-      },
-      {
-        name: "Pineapple",
-        number: "4",
-      },
-      {
-        name: "Mango",
-        number: "5",
-      },
-      {
-        name: "Passionfruit",
-        number: "5",
-      },
-      {
-        name: "Lemon",
-        number: "6",
-      },
-      {
-        name: "Lime",
-        number: "7",
-      },
-      {
-        name: "Watermelon",
-        number: "8",
-      },
-      {
-        name: "Apple",
-        number: "1",
-      },
-      {
-        name: "Orange",
-        number: "3",
-      },
-      {
-        name: "Pineapple",
-        number: "4",
-      },
-      {
-        name: "Mango",
-        number: "5",
-      },
-      {
-        name: "Passionfruit",
-        number: "5",
-      },
-      {
-        name: "Lemon",
-        number: "6",
-      },
-      {
-        name: "Lime",
-        number: "7",
-      },
-      {
-        name: "Watermelon",
-        number: "8",
-      },
-      {
-        name: "Apple",
-        number: "1",
-      },
-      {
-        name: "Orange",
-        number: "3",
-      },
-      {
-        name: "Pineapple",
-        number: "4",
-      },
-      {
-        name: "Mango",
-        number: "5",
-      },
-      {
-        name: "Passionfruit",
-        number: "5",
-      },
-      {
-        name: "Lemon",
-        number: "6",
-      },
-      {
-        name: "Lime",
-        number: "7",
-      },
-      {
-        name: "Watermelon",
-        number: "8",
-      },
-      {
-        name: "Apple",
-        number: "1",
-      },
-      {
-        name: "Orange",
-        number: "3",
-      },
-      {
-        name: "Pineapple",
-        number: "4",
-      },
-      {
-        name: "Mango",
-        number: "5",
-      },
-      {
-        name: "Passionfruit",
-        number: "5",
-      },
-      {
-        name: "Lemon",
-        number: "6",
-      },
-      {
-        name: "Lime",
-        number: "7",
-      },
-      {
-        name: "Watermelon",
-        number: "8",
-      },
-      {
-        name: "Apple",
-        number: "1",
-      },
-      {
-        name: "Orange",
-        number: "3",
-      },
-      {
-        name: "Pineapple",
-        number: "4",
-      },
-      {
-        name: "Mango",
-        number: "5",
-      },
-      {
-        name: "Passionfruit",
-        number: "5",
-      },
-    ]}
-  />
-);
-```
-
-```js
-<Table
-  onVisibleRowsChange={(r) => console.log("visible rows", r)}
-  title="[onVisibleRowsChange] Table"
-  columns={[
-    {
-      Header: "Name",
-      accessor: "name",
-    },
-    {
-      Header: "Num",
-      accessor: "number",
-      isNumber: true,
-      size: 80,
-    },
-  ]}
-  data={[
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-    {
-      name: "Lemon",
-      number: "6",
-    },
-    {
-      name: "Lime",
-      number: "7",
-    },
-    {
-      name: "Watermelon",
-      number: "8",
-    },
-    {
-      name: "Apple",
-      number: "1",
-    },
-    {
-      name: "Orange",
-      number: "3",
-    },
-    {
-      name: "Pineapple",
-      number: "4",
-    },
-    {
-      name: "Mango",
-      number: "5",
-    },
-    {
-      name: "Passionfruit",
-      number: "5",
-    },
-  ]}
-/>
-```