T
TanStack•16mo ago
like-gold

Dynamic formatting of table rows

I'm trying to create a dynamic table row which wraps content and changes the shape of the row as a result. I've created an example of this using Tailwindcss and a regular html table here: https://play.tailwindcss.com/FUf0HYAUiS however, I'm unsure how to implement something similar using TanStack Table given the method of mapping the data. My current implementation using TanStack is as follows: 
    <div className="border rounded-md">
      <Table>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
    <div className="border rounded-md">
      <Table>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
However, my end goal (similar to my example) is to have the content wrap; similar to the image provided.
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?