The DataTable component is used to display tabular information across rows and columns.



Below is a collection of simple to complex examples.


This is a basic example.

With Fixed Header

Optionally, the header of the table can be fixed in place while scrolling.

With Row Selection

Row selection allows users to select one or multiple rows via row checkboxes. Users can select or deselect all rows with the header row checkbox, which is also live updated based on the selection.

With Pagination

Pagination can additionally be rendered in the table footer.

With Progress Indicator

Progress indicator bellow the table header can be used to signify an ongoing process to the user.

With Column Sorting

Column sorting allows the user to reorder the table rows in ascending or descending order by a column.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2022-10-03