Enterprise / COMPONENT

DataGrid

Web · implementedDesktop · partial

Tabel dengan pencarian, sorting, pagination, dan seleksi baris.

import { DataGrid } from "./vendor/syne-ui/index.js";TypeScript ready

5 rows · 0 selected

Data grid

	Ada Lovelace	Engineer	97
	Rafi Pratama	Designer	82

Page 1 of 3

Selected IDs: none. Selection stays with the row after sorting or filtering.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX

import { DataGrid } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <DataGrid columns={[{ key: "name", header: "Name" }]} data={[{ name: "Ada" }]} pageSize={10} />
  );
}

Make it yours

Use className and --syne-* tokens to match your design system.