Responsive Table

  • Use stickyHeading or stickyColumn props if you want to make the header sticky and/or your first column.
Item
Description		 Public
Item #0 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #1 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #2 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #3 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #4 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #5 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #6 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #7 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #8 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #9 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #10 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #11 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #12 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #13 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #14 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #15 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #16 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #17 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #18 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #19 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #20 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #21 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #22 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #23 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #24 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #25 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #26 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #27 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #28 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #29 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #30 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #31 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #32 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #33 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #34 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #35 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #36 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #37 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #38 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #39 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #40 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #41 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #42 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #43 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #44 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #45 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #46 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #47 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #48 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #49 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #50 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #51 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #52 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #53 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #54 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #55 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #56 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #57 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #58 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #59 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #60 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #61 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #62 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #63 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #64 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #65 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #66 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #67 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #68 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #69 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #70 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #71 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #72 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #73 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #74 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #75 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #76 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #77 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #78 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #79 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #80 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #81 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #82 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #83 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #84 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #85 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #86 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #87 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #88 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #89 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #90 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #91 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #92 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #93 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #94 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #95 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #96 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #97 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
Item #98 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. no
Item #99 Here's quite a big description that has a lot of content that we would like to be able to define a width for. We can do this by adding a div with a width style. yes
  • will darken if an element inside the row is focused on
  • add a div with style="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 header th 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>