Get License

Cookbooks / Invoice table

Invoice table

serverSide paging and sort, row selectable, and resizable columns — the pattern behind an ops dashboard. Install with npx base-ui-cli add data-table (Pro).

  1. Install the table. Run npx base-ui-cli add data-table (Pro) to copy the table into your project.
  2. Turn on ops features. Set serverSide, selectable, and resizable on base-data-table.
  3. Fetch pages. Handle (pageChange) and (sortChange) against your API.
  4. Act on selection. Bind [(selected)] and run a bulk action such as mark paid.

0 selected

Invoice
Customer
Amount
Status
Due
INV-1001 Customer 1 $80 Paid 2026-01-20
INV-1002 Customer 2 $97 Open 2026-02-20
INV-1003 Customer 3 $114 Overdue 2026-03-20
INV-1004 Customer 4 $131 Paid 2026-04-20
INV-1005 Customer 5 $148 Open 2026-05-20
INV-1006 Customer 6 $165 Overdue 2026-06-20
INV-1007 Customer 7 $182 Paid 2026-07-20
INV-1008 Customer 8 $199 Open 2026-08-20
1–8 of 64