Data Table - Seventh UI VanillaJS

Playground

The example below is initialized by SeventhUI.init(document) using per-instance options from the docs script.

Column Layout

Columns can opt into wrapping and explicit widths while keeping the DS minimum cell size and scroll wrapper.

Selection And Expansion

Use native checkbox/radio controls for selection and a detail row for expandable content.

Row Actions

Up to three action icons are visible. When a row has more than three actions, the first two stay inline and the third icon opens an overflow menu.

Scope

This controller is intentionally small. Use a dedicated grid package when the product needs advanced table behavior.

Included	Out of scope
Local data rendering, keyword filter, sortable configured columns, client-side pagination, row actions, selection, expansion, and runtime events.	Server data orchestration, virtualization, grouping, resizing, reordering, pinned columns, tree data, and inline editing.

Hooks

Generated controls expose hooks for behavior and testing. Styling remains owned by @seventh-ui/css.

Hook	Purpose
`data-sui-data-table`	Root initialized by the component registry.
`data-sui-data-table-search`	Keyword filter input.
`data-sui-data-table-sort`	Sortable header action for configured columns.
`data-sui-data-table-row-select`	Generated checkbox/radio row selection control.
`data-sui-data-table-row-expand`	Generated expandable-row trigger.
`data-sui-data-table-action`	Generated inline or overflow row action.
`data-sui-data-table-page-size`	Client-side page-size dropdown trigger.
`data-sui-data-table-page`	Current page dropdown trigger.
`data-sui-data-table-page-status`	Page count text, for example `of 3 pages`.
`data-sui-data-table-prev` / `data-sui-data-table-next`	Pagination controls.

Events

Events bubble from the Data Table root and include the controller, current state, page rows, source event, and active filter/sort metadata.

sui:data-table:filter
sui:data-table:sort
sui:data-table:page
sui:data-table:select
sui:data-table:expand
sui:data-table:action
sui:data-table:render

Markup

Pass columns and data through JavaScript options.

<section id="cameras" data-sui-data-table></section>
<script>
  SeventhUI.createDataTableController(document.querySelector("#cameras"), {
    columns: [
      { id: "name", accessorKey: "name", header: "Camera", sortable: true },
      { id: "status", accessorKey: "status", header: "Status", sortable: true },
      { id: "notes", accessorKey: "notes", header: "Notes", wrap: true, minWidth: 260 }
    ],
    actions: [
      { id: "view", label: "View", icon: "eye-outline" }
    ],
    data: [
      { id: "cam-1", name: "Main entrance", status: "Online", notes: "Lobby camera" }
    ],
    expandable: true,
    pageSize: 10,
    selectionMode: "multiple"
  });
</script>