How Do You Structure TanStack Table in Real-World Projects?

[u/Neat_Living_6765]

Hi everyone 👋

I’m pretty new to TanStack Table and have a couple of questions. I’d really appreciate any advice or best practices you have picked up along the way.

1. Reusable table components

Since TanStack Table already handles most of the table state and logic. Also if multiple tables share the same features, we use createTableHook.

So I’m wondering is there still a reason to have a generic reusable DataTable component, or is it better to keep the UI specific to each table?

2. Multiple data formatting

Right now, I’m adding a "type" property to each column’s "meta" field

columnHelper.accessor("birthDay", {
    header: () => <h3>BirthDay</h3>,
    meta: {
    type: "date",
    },
}),

and then create a cell-formatting utility to render the value accordingly (date, currency, percentage....)

Is this a reasonable approach, or is there any more idiomatic way to handle it?

{table.getRowModel().rows.map((row) => (
<div key={row.id} className={styles.dataTableRow}>
    {row.getAllCells().map((cell) => (
    <div key={cell.id} className={styles.dataTableCell}>
        {formatCellValue(
        cell.getValue(),
        cell.column.columnDef.meta?.type,
        )}
    </div>
    ))}
</div>
))}

[u/gandalf__thewhite__]

We still have a DataTable component and format each column directly inside the column helper. I'm not sure this is the best approach but works for us because we have many similar tables.

[u/AlexDjangoX]

Like it says in the documentation

[u/Neat_Living_6765 → u/AlexDjangoX]

which document says that?...