render row as a card insted of table

[zakidze]

is it possible to render rows as cards insted of table example i want to make an ecommerce and the articles i use for them react table and insted of table view i want to appare as grid view each card contains all article information like image name price , pulled from json

[KevinVandy]

You can use whatever ui markup you want. TanStack Table only cares about the logic of your table. Use whatever html and css you want.

[zakidze]

i tryed but coudnt get it can you please do me a simple example
[
{
articlename:watch,
price:233€
},
{
articlename:laptop,
price:2303€
}
]

i want to render 2 cards each one contain article and price ,
i usuly map and render card inside grid or flex i want this but with react table

[ealexhaywood]

Yes you can. Our project has a requirement for users to be able to choose between a table or cards view for a lot of pages, and we wanted to re-use a lot of the filtering, sorting, and pagination controls that TanStack Table provides and avoid having to re-implement for cards.

You can use useReactTable() how you normally would and create a component that can accept a Row<TData> as a prop and render it

[wibed]

me too, recently come across this thought and found it to be true. yet cant find an example.
still inmidst of something else but would love to see it online so i can get started right away

[wibed]

here is a snippet, on how i approached it

  const [locationListType, setlocationListType] = useState<"rows" | "cards">("rows")
...
      {locationListType === "rows" && (
        <div className="overflow-x-auto min-h-[196px]">
          <table className="table">
            <thead>
              {table.getHeaderGroups().map((headerGroup, idx) => (
                <tr key={headerGroup.id}>
                  <th></th>
                  {headerGroup.headers.map(header => {
                    return (
                      <th key={header.id} colSpan={header.colSpan}>
                        {header.isPlaceholder
                          ? null
                          : (flexRender(header.column.columnDef.header, header.getContext()))}
                      </th>
                    )
                  })}
                </tr>
              ))}
            </thead>
            <tbody>
              {table.getRowModel().rows.map((row, idx) => (
                <tr key={row.id}>
                  <th>{idx}</th>
                  {row.getVisibleCells().map((cell) => (
                    <td key={cell.id} className="">
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {locationListType === "cards" && (
        <div className="py-2 min-h-[196px] flex flex-wrap gap-2">
          {table.getRowModel().rows.map(row => (
            <div key={row.id} className="relative aspect-video w-full max-w-xs border rounded-lg">
              {row.getVisibleCells().map(cell => (
                <div className="flex flex-row">
                  <div key={cell.column.id}>
                    {flexRender<any>(cell.column.columnDef.header, {})}
                  </div>
                  <div key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}
...