ResponsiveTable
Responsive Table
- Use
stickyHeading
orstickyColumn
props if you want to make the header sticky and/or your first column.
<Story height={400} knobs={{ stickyHeading: true, stickyColumn: true, width: '20-100;60' }} let:knobs={{ stickyHeading, stickyColumn, width }}
- will darken if an element inside the row is focused on
- add a
div
withstyle="width: 500px;"
to any header cell you want to force wider - adapted from https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/
-
The example above has
text-xs font-semibold text-gray-600 uppercase tracking-wider
classes added to the table headerth
elements - The following wrapper element makes for a full screen sticky table on page where the header element also has an z-index of 2.
svelte
<div class="sticky top-0 relative z-2 h-screen flex flex-col bg-white"><ResponsiveTable><thead><th>Foo</th><th>Bar</th></thead><td>1</td><td>2</td></ResponsiveTable></div>