Tailwind Responsive Tables (and how does flexRender work?)

    {
      header: () => (
        <th className="md:collapse">Head</th> 
      ),
      accessorKey: "updatedAt",
      cell: (cell) => {
        return (
          <TableDataItem className="md:collapse"> Table Data
          </TableDataItem>
        );
      },
    },

      <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>