@redsift/design-system-legacy 8.0.0-alpha.8 → 8.0.1

package/src/components/Table/readme.md

@@ -0,0 +1,2190 @@
+### 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",
+    },
+  ]}
+/>
+```