Why

Sillar Data Grid sits between headless table engines and large enterprise suites. It provides polished defaults, semantic table markup, keyboard navigation, responsive layouts, and controlled APIs while remaining independent from a component runtime.

Install

npm install sillar-data-grid

Import the stylesheet once:

import 'sillar-data-grid/styles.css';

Quick start

import { useState } from 'react';
import { DataGrid, type DataGridColumn } from 'sillar-data-grid';

type Customer = { id: number; name: string; country: string; balance: number };

const columns: DataGridColumn<Customer>[] = [
  { key: 'name', header: 'Customer', accessor: 'name', sortable: true },
  { key: 'country', header: 'Country', accessor: 'country', sortable: true },
  {
    key: 'balance',
    header: 'Balance',
    accessor: 'balance',
    sortable: true,
    align: 'end',
    cell: (value) => new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' }).format(Number(value)),
  },
];

export function CustomerGrid({ customers }: { customers: Customer[] }) {
  const [filter, setFilter] = useState('');
  const [page, setPage] = useState(0);

  return (
    <DataGrid
      aria-label="Customers"
      rows={customers}
      columns={columns}
      getRowId={(customer) => customer.id}
      filter={filter}
      onFilterChange={setFilter}
      filterPlaceholder="Search customers"
      selectable
      pagination={{ page, pageSize: 25 }}
      onPageChange={setPage}
    />
  );
}

Accessibility contract

• Uses a native table, headings, rows, and cells.
• Exposes aria-sort on the active sortable column.
• Supports arrow-key navigation between header and body cells.
• Preserves native checkbox semantics for selection.
• Announces filter result counts and loading state.
• Keeps visible focus in light and dark themes.
• Respects prefers-reduced-motion.

Automated checks improve coverage but do not replace testing with screen readers and disabled users.

Production readiness

• CI runs TypeScript, build output generation, accessibility-focused tests, and npm package previews.
• Releases publish from version tags with npm provenance.
• Public security, contribution, and code of conduct policies are included in the repository and npm package.
• The grid is SSR-friendly and uses peer React dependencies instead of bundling React.

Controlled and server-side usage

Pass sort with onSortChange, selectedRows with onSelectedRowsChange, or pagination with onPageChange to control state. Set serverSide when rows already represent the current server response; totalRows then controls the page count.

Theming

Override semantic tokens on :root, .dark, [data-theme="dark"], or a product wrapper:

.my-product {
  --sdg-brand: #2563eb;
  --sdg-radius: 1rem;
  --sdg-bg: #ffffff;
  --sdg-border: #dbe3ee;
}

Roadmap

• Column visibility, resizing, ordering, and pinning
• Virtualized rows and columns
• Grouping, aggregation, and expandable rows
• CSV/JSON export
• Editable cells with validation
• Framework adapters and documentation site

License

MIT

Supply-chain verification and runtime permissions

Runtime: React data-grid rendering and local filtering/sorting/pagination. Application code owns data fetching, authorization and server-side filtering. The package is not a data-access security boundary.

Install the exact version required by your application and commit your lockfile. Releases request npm provenance from GitHub Actions, and CI checks the dependency graph and package contents before publication. The artifact guard rejects recognized credential patterns, private/environment files, unsafe paths, missing attribution/metadata and unexpected consumer install hooks. It is a focused release check, not proof that every secret or malicious behavior is detectable.

npm install --save-exact [email protected]
npm audit
npm audit signatures

When the installed graph has no registry dependencies, npm may report that there are no dependency signatures to verify.

Inspect the exact-version Socket report and the npm provenance link. A successful CI check is not the same as a package score of 100. Socket also weighs dependency counts and real adoption; no score, download history or security guarantee is fabricated. Report suspected issues through SECURITY.md.