`import { Table } from "@bigbinary/neetoui";`

`Table` is an arrangement of rows and columns used to display data in a
structured and readable format.

We use Ant Design's `Table` component under the hood. For extra customization,
refer [AntD Table](https://ant.design/components/table/).

```jsx
const columnData = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: 75,
    sorter: (a, b) => a.id - b.id,
  },
  // Other column defenitions
];

const rowData = [
  {
    id: 1,
    // Data for other columns
  },
  {
    id: 2,
    // Data for other columns
  },

  // Other rows
];

<Table columnData={columnData} rowData={rowData} />;
```

##### columnData <a id="column_data" />

Unlike Antd Table `columnData` prop is used to set the column definition.

```jsx
const columnData = [
  {
    title: "First Name",
    dataIndex: "first_name",
    key: "first_name",
    width: 150,
    // the 'key' property from all the columns is available as the argument to the render method
    render: (first_name, last_name) => {
      return (
        <div className="flex flex-row items-center">
          <Avatar
            user={{ name: `${first_name} ${last_name}` }}
            size="small"
            className="mr-2"
          />
          {first_name}
        </div>
      );
    },
  },
  {
    title: "Last Name",
    dataIndex: "last_name",
    key: "last_name",
    width: 150,
  },
  // other columns
];
```

Keys for a column definition:

- `title` : The title of a column. Accepts a valid React Node(string | number |
  JSX) or a callback that returns a React Node. A hash with `sortOrder`,
  `sortColumn` and `filters` as keys are available as a parameter to the
  callback.
- `dataIndex` : The unique key over which, the row data is mapped over for the
  particular column. Accepts a string or an array of strings.
- `key` : Unique identifier of a column. Accepts a string.
- `render` : Defines how data should be rendered within the column. Accepts a
  callback that returns a React Node.
- `width` : Width of a column. Accepts a string or a number. Default value is
  `auto`.

Refer [column docs](https://ant.design/components/table/#Column) from AntD for
more customizations.

#### Using dropdown inside the Table

While using `Dropdown` inside the Table, it is recommended to pass the
`strategy` prop as `fixed` for the `Dropdown` component, in order to avoid the
dropdown getting hidden by the Table container overflow. Especially for tables
with very few rows of data.

##### With fixed columns

While using a `Dropdown` inside fixed columns, to avoid clipping or `z-index`
issues, please use `appendTo={() => document.body}` along with the
`strategy="fixed"` props for the `Dropdown`.

#### Better support and performance on horizontal scroll

To support cross browser horizontal scroll and improve performance, we recommend
to provide a width to the columns to the `Table`. Having a width on the columns
will also prevent the `ResizeObserver - limit exceeded` error.

```jsx
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: 75,
    sorter: (a, b) => a.id - b.id,
  },
  {
    title: "GUID",
    dataIndex: "guid",
    key: "guid",
    width: 150,
    ellipsis: {
      showTitle: false,
    },
  },
  {
    title: "First Name",
    dataIndex: "first_name",
    key: "first_name",
    width: 150,
  },
  {
    title: "Last Name",
    dataIndex: "last_name",
    key: "last_name",
    width: 150,
  },
  {
    title: "Email",
    dataIndex: "email",
    key: "email",
    width: 200,
    ellipsis: {
      showTitle: false,
    },
  },
  {
    title: "Company Name",
    dataIndex: "company_name",
    key: "company_name",
    ellipsis: {
      showTitle: false,
    },
    width: 75,
  },
];

const UserTable = () => (
  <Table
    columnData={columns}
    // other props
  />
);
```
