AdaptTable for Radix

Export and print in Radix

One exportCsv prop puts an export button in the toolbar, and one scope decides what leaves: the current page, every filtered row, or exactly the cells selected.

Swap the writer and the same button produces a different file. xlsxWriter writes Excel outline levels for grouped rows and bolds the totals; pdfWriter lays out a paginated document, right-to-left scripts included when you hand it a font.

printTable opens the browser's own print dialog against a layout built for paper rather than a screenshot of the page.

The export control wraps its label in Radix's Spinner rather than swapping it out, which keeps the button the same width so the toolbar does not reflow when an export starts.

The code

import { DataTable } from "@adapttable/radix";
import { xlsxWriter } from "@adapttable/core/xlsx";

export function People({ rows, columns }) {
  return (
    <DataTable
      data={rows}
      columns={columns}
      rowKey={(row) => row.id}
      groupBy="team"
      exportCsv={{
        scope: "all",
        filename: "people.xlsx",
        writer: xlsxWriter({ sheetName: "People" }),
      }}
    />
  );
}

Install

pnpm add @adapttable/radix @adapttable/core @radix-ui/themes

The same feature in the other kits

More Radix features

Reference: export-pdf. More of this kit: AdaptTable for Radix, or the live demo.