Table Components

Examples

Add `html` to render HTML elements in a table.

<script>
import { Table, TableDefaultRow } from 'flowbite-svelte'
let itemEx = [
  ['Apple MacBook Pro 17"','Sliver','Laptop','$2999','<a href="/" class="text-blue-600 hover:underline dark:text-blue-500">Edit</a>'],
  ['Microsoft Surface Pro','White','Laptop PC','$1999','<a href="/" class="text-blue-600 hover:underline dark:text-blue-500">Edit</a>'],
  ['Magic Mouse 2','Black','Accessories','$99','<a href="/" class="text-blue-600 hover:underline dark:text-blue-500">Edit</a>']
]
let headerEx = [' Product name','Color','Category','Price','Edit']
</script>

<Table header={headerEx} {divClass} >
  <TableDefaultRow items={itemEx} html />
</Table>

Striped rows

Set `rowState` to striped to alternate background colors of every second tabel row.

<Table header={headerEx} {divClass} >
  <TableDefaultRow items={itemEx} rowState="striped" html />
</Table>

Hover

Set `rowState` to hover to change the background color of a data row when hovering over the element with the cursor.

<Table header={headerEx} {divClass} >
  <TableDefaultRow items={itemEx} rowState="hover" html />
</Table>

Table search

<TableSearch menuItems={itemEx} header={headerEx} placeholder="Search by product name"/>

Props

The component has the following props, type, and default values. See type-list page for type information.

Table

TableDefaultRow

TableSearch

References

Flowbite Tables