rcube-html examples
npmGitHub
Data components

Data table

Sorting, search, paging, selection, formats, totals, CSV export and colors.

A table from columns and rows

columns say what to show: each has a key (the row field), a title, and options such as sortable, format (currency, number, percent, date, boolean), badge (colors by value), link and total.

rows is the data. Table options switch features on: searchable, pageSize, selectable, exportable (CSV), columnToggle, and stackBelow: "md" shows cards on small screens.

rowRules color whole rows by value; hoverRow / hoverColumn color what the mouse is over.

Try it

Loading example…
Events0
Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "DataTable",
    "id": "orders",
    "props": {
      "title": "Orders",
      "rowKey": "id",
      "columns": [
        {
          "key": "id",
          "title": "#",
          "sortable": true,
          "width": 60
        },
        {
          "key": "customer",
          "title": "Customer",
          "sortable": true
        },
        {
          "key": "email",
          "title": "Email",
          "link": "mailto:{email}",
          "hideBelow": "lg"
        },
        {
          "key": "status",
          "title": "Status",
          "badge": {
            "Paid": "success",
            "Due": "warning",
            "Overdue": "danger"
          }
        },
        {
          "key": "amount",
          "title": "Amount",
          "format": "currency",
          "currency": "USD",
          "align": "end",
          "sortable": true,
          "total": "sum"
        },
        {
          "key": "date",
          "title": "Date",
          "format": "date",
          "sortable": true
        }
      ],
      "rows": [
        {
          "id": 1,
          "customer": "Ann Lee",
          "email": "ann@example.com",
          "status": "Paid",
          "amount": 120,
          "date": "2026-10-02"
        },
        {
          "id": 2,
          "customer": "Bob Stone",
          "email": "bob@example.com",
          "status": "Due",
          "amount": 75.5,
          "date": "2026-10-05"
        },
        {
          "id": 3,
          "customer": "Cara Diaz",
          "email": "cara@example.com",
          "status": "Paid",
          "amount": 310,
          "date": "2026-10-07"
        },
        {
          "id": 4,
          "customer": "Dev Patel",
          "email": "dev@example.com",
          "status": "Overdue",
          "amount": 48,
          "date": "2026-09-28"
        },
        {
          "id": 5,
          "customer": "Eli Moss",
          "email": "eli@example.com",
          "status": "Paid",
          "amount": 220,
          "date": "2026-10-11"
        },
        {
          "id": 6,
          "customer": "Fay Wong",
          "email": "fay@example.com",
          "status": "Due",
          "amount": 95,
          "date": "2026-10-12"
        },
        {
          "id": 7,
          "customer": "Gus Hale",
          "email": "gus@example.com",
          "status": "Paid",
          "amount": 1250,
          "date": "2026-10-15"
        },
        {
          "id": 8,
          "customer": "Hana Ito",
          "email": "hana@example.com",
          "status": "Overdue",
          "amount": 64,
          "date": "2026-09-30"
        },
        {
          "id": 9,
          "customer": "Ivan Roy",
          "email": "ivan@example.com",
          "status": "Paid",
          "amount": 180,
          "date": "2026-10-18"
        },
        {
          "id": 10,
          "customer": "Jo Kim",
          "email": "jo@example.com",
          "status": "Due",
          "amount": 33,
          "date": "2026-10-20"
        },
        {
          "id": 11,
          "customer": "Kai Berg",
          "email": "kai@example.com",
          "status": "Paid",
          "amount": 410,
          "date": "2026-10-22"
        },
        {
          "id": 12,
          "customer": "Lia Cruz",
          "email": "lia@example.com",
          "status": "Paid",
          "amount": 88,
          "date": "2026-10-25"
        }
      ],
      "pageSize": 5,
      "pageSizeOptions": [
        5,
        10,
        25
      ],
      "searchable": true,
      "selectable": true,
      "exportable": true,
      "columnToggle": true,
      "stackBelow": "md",
      "size": "sm",
      "rowRules": [
        {
          "when": {
            "field": "status",
            "equals": "Overdue"
          },
          "background": "#fdecec"
        }
      ],
      "hoverRow": {
        "background": "#fff8e1"
      },
      "onRowClick": "rowClicked()",
      "onSelectionChange": "selectionChanged()",
      "onSortChange": "sortChanged()",
      "onPageChange": "pageChanged()"
    }
  }
]

Options used here

OptionWhat it does
columns[].key / title / width / alignWhich row field, its heading, width and alignment (start / center / end).
columns[].sortableClick the heading to sort.
columns[].format / currency / decimalscurrency, number, percent, date, boolean.
columns[].badge{ value: "bootstrap color" } — show the value as a badge.
columns[].link / templateLink with {field} placeholders; text like "{first} {last}".
columns[].totalFooter total: sum, avg, min, max, count.
columns[].hideBelowHide the column on small screens (md, lg, ...).
rows / rowKeyThe data and the field that identifies a row.
pageSize / pageSizeOptionsRows per page and the choices (0 = no paging).
searchable / selectable / exportable / columnToggleSearch box, checkboxes, CSV export, column chooser.
stackBelowCards instead of a table below this screen size.
rowRules / hoverRow / hoverColumn / hoverCellColors by value and on mouse over.

Events

EventWhen it runsYour action receives
onRowClickA row is clicked.{ row, rowKey }
onSelectionChangeCheckboxes change.{ selected, rows }
onSortChangeA heading is clicked.{ sort: { key, dir } } (or null)
onPageChangeAnother page is shown.{ page, pageSize }