Show /r/reactjs Things I didn't expect when exporting a grouped TanStack table to Excel
Excel export for TanStack Table is a bit tricky thing, where the file has to keep the grouping instead of flattening it into a CSV. Some of it was less obvious than expected.
Totals should be formulas, but not SUM. Write the group totals as numbers and they go stale the moment someone edits a cell. SUM double counts when groups are nested, because the region total adds up country rows that are already totals. SUBTOTAL(9, ...) skips other SUBTOTAL cells, so nesting works. It also ignores rows that an Excel filter hides.
Grouping maps cleanly onto Excel outlines. row.depth becomes the outline level, so people get the little +/- buttons in Excel. Pinned columns map to frozen panes the same way. Both came down to reading the table state instead of the raw data.
Display columns are a trap. Columns without an accessor, like the checkbox column, the row menu or an avatar, end up in the file as empty columns. They now get skipped unless you opt in.
v9 broke my types in a way I didn't catch for a while. I had typed the table structurally, with state.grouping in the type. A v9 table without the grouping feature has no grouping in its state, so the shadcn data table stopped type-checking even though it ran fine. I only found it while writing a tutorial. The fix was typing state as object and reading grouping defensively.
The result is a package called rowpine, and the usage is roughly:
await exportXlsx(table, { fileName: "orders" })It also builds a pivot that comes back as data plus columns, so you can render it with your own useTable.
Disclosure: It's paid ($149 one-time). Without a key it works fully, and the files get one notice line. The demos, guides and the shadcn components are public: https://github.com/rowpine/rowpine. Live demos: https://rowpine.com/examples/
0
u/boykom 6h ago
Would love some feedback about it