# @flowbite-svelte-plugins/datatable

[Documentation](https://flowbite-svelte.com/docs/plugins/datatables)

Use the datatable component to search, sort, filter and paginate table data of rows and columns for your web application.

The datatable component examples are open-source under the MIT License and they are based on the [simple-datatables repository](https://github.com/fiduswriter/simple-datatables) from GitHub.

## Installation

```bash
pnpm i -D @flowbite-svelte-plugins/datatable simple-datatables
```

### app.css

```css
@source "../node_modules/simple-datatables/dist";
@source "../node_modules/@flowbite-svelte-plugins/datatable/dist";

.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active a:focus,
.datatable-pagination .datatable-active a:hover,
.datatable-pagination .datatable-active button,
.datatable-pagination .datatable-active button:focus,
.datatable-pagination .datatable-active button:hover {
  background-color: #ffe4de;
  cursor: default;
}

.datatable-wrapper .datatable-table tbody tr.selected {
  background-color: #fff1ee !important;
}
```

## Default datatable

Use this example to show table data with default sorting and pagination functionalities.

```svelte
<script lang="ts">
  import { Table } from '@flowbite-svelte-plugins/datatable';
  import items from './data/sample.json';
</script>

<Table {items} />
```