T
TanStack•2y ago
sunny-green

Tailwind Responsive Tables (and how does flexRender work?)

Hi guys, so i feel like this is a pretty simple question in my ColDef i can create headers and cells with a responsive tag: 
    {
      header: () => (
        <th className="md:collapse">Head</th> 
      ),
      accessorKey: "updatedAt",
      cell: (cell) => {
        return (
          <TableDataItem className="md:collapse"> Table Data
          </TableDataItem>
        );
      },
    },
    {
      header: () => (
        <th className="md:collapse">Head</th> 
      ),
      accessorKey: "updatedAt",
      cell: (cell) => {
        return (
          <TableDataItem className="md:collapse"> Table Data
          </TableDataItem>
        );
      },
    },
and this works fine, except the table width wont change because the <th> is also rendered by the TableComponent at the level above. and if i delete that I get an error. How can I collapse one of them? 
      <thead className="bg-secondary-50 dark:bg-secondary-800">
        {getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id} className="TableComponentTH">
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <thead className="bg-secondary-50 dark:bg-secondary-800">
        {getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id} className="TableComponentTH">
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
No description
2 Replies
sunny-green
sunny-greenOP•2y ago
(showing the creation of a nested <th>
No description
judicial-coral
judicial-coral•2y ago
First up, the header and cell props should already be rendered in a <tr> wherever you map your rows, etc. Inside those props above, you'd use a div or span element to attach a style/tailwind class to - these elements go inside the parent <th> and <td> cells.. In terms of how to hide individual rows, there are a number of potential methods, depends on your usecase or how over-engineered you want to get. One that springs to mind. - Begin hiding the <th> and <td> tags when mapping thru them after a particular array index.

Did you find this page helpful?