# DataTable

Data with search, sorting, selection and pagination.

## How to use it

Define columns using accessorKey and header and pass data as an array. Columns use LegacyColumnDef from the TanStack version included in Kivora.



## Import


```tsx
import { DataTable } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<DataTable columns={[{accessorKey:"name",header:"Name"},{accessorKey:"role",header:"Role"}]} data={[{name:"Sofía Martín",role:"Design"},{name:"Lucas García",role:"Development"},{name:"Emma Wilson",role:"Product"}]} searchable paginated pageSize={2} />
```


## API: DataTable


```typescript
declare function DataTable<TData extends RowData>({ advanced, columns, data, emptyMessage, filterable, filters, filterMenuOpen, className, multiSelect, onFilterMenuOpenChange, pageSize, pageSizeOptions, paginated, paginationVariant, renderRowActions, rowActions, bulkActions, searchable, searchPlaceholder, selectable, ...props }: DataTableProps<TData>): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| columns | LegacyColumnDef<TData, unknown>[] | Yes | Column definitions, data access and presentation. |
| data | TData[] | Yes | Rows to display. |
| advanced | boolean | No | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| bulkActions | DataTableBulkAction<TData>[] | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| emptyMessage | ReactNode | No | Content when there are no results. |
| filterable | boolean | No | Enable filters. |
| filterMenuOpen | boolean | No | See the published type. |
| filters | DataTableFilter[] | No | Definition of available filters. |
| id | string | No | Element identifier; associates labels and descriptions. |
| multiSelect | boolean | No | Allow multiple row selection. |
| onChange | ChangeEventHandler<HTMLTableElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLTableElement> | No | Action performed when the element is activated. |
| onFilterMenuOpenChange | ((open: boolean) => void) | No | See the published type. |
| onSubmit | SubmitEventHandler<HTMLTableElement> | No | Form submission event. |
| pageSize | number | No | Number of rows per page. |
| pageSizeOptions | number[] | No | Available page sizes. |
| paginated | boolean | No | Enable pagination. |
| paginationVariant | "buttons" \| "numbers" | No | See the published type. |
| renderRowActions | ((row: TData) => ReactNode) | No | See the published type. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| rowActions | DataTableAction<TData>[] | No | See the published type. |
| searchable | boolean | No | Enable built-in search. |
| searchPlaceholder | string | No | Search hint text. |
| selectable | boolean | No | Allow row selection. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/data-table