@arcanalabs/datatable

@arcanalabs/datatable

A typed, framework-native data table for React, Vue 3, Angular and Svelte — one shared core, four first-class adapters.

📖 Documentation · 🎛 Playground

npm install @arcanalabs/datatable

import { ArcanaDataTable } from "@arcanalabs/datatable/react"; // or /vue, /angular, /svelte
import "@arcanalabs/ui-components/styles.css";
import "@arcanalabs/datatable/styles.css";

<ArcanaDataTable config={{ columns, datasource: (params) => api.orders.list(params) }} />

To keep only horizontal row separators, add columnBordersEnabled: false to the table config. The outer grid border remains unchanged.

Import both stylesheets once at the application entrypoint. Input, Select and DatePicker use the official @arcanalabs/ui-components stylesheet and their native sm variant; the DataTable CSS only adds grid layout and theme tokens.

Everything else — remote/dataset modes, virtual rows and columns, cell/row editing, advanced filter operators, grouping and aggregations, row/column drag-and-drop, persistent column visibility, selection, expandable rows, themes, localization (8 languages) and the full API reference — lives in the documentation, with live demos for all four frameworks.

MIT © Arcana Labs