TanStackT
TanStack•2y ago•
2 replies
safe-amethyst

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>
        );
      },
    },


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>
image.png
Was this page helpful?