@softium/table-react
v0.1.1
Published
React bindings for softium-ui Table: useTable hook, styled components, i18n.
Maintainers
sunghoon_leeReadme
@softium/table-react
React bindings for the softium-ui Table: the useTable hook, batteries-included
styled components (Table, DataGrid, PivotTable), a minimal spreadsheet
(Sheet), built-in cell renderers, i18n, and export helpers (CSV / Excel / JSON / XML).
Part of softium-ui — an ERP-focused React UI library. Logic/view separation follows TanStack Table, but ships a ready-to-use styled layer so you skip the headless boilerplate.
Install
npm i @softium/table-react @softium/table-stylesreact and react-dom (^18 or ^19) are peer dependencies.
Usage
Import the stylesheet once at your app entry, then render:
import '@softium/table-styles/styles.css';
import { Table, useTable } from '@softium/table-react';
interface Product {
id: number;
name: string;
price: number;
}
const data: Product[] = [
{ id: 1, name: 'Widget', price: 1200 },
{ id: 2, name: 'Gadget', price: 890 },
];
export function Demo() {
const table = useTable<Product>({
data,
columns: [
{ key: 'name', label: 'Name', flex: 1 },
{ key: 'price', label: 'Price', type: 'number', width: 120 },
],
});
return <Table table={table} />;
}Sheet (spreadsheet with formulas) and DataGrid / PivotTable are exported
from the same entry. See the repo README for the full component list and the
column-state / adapter model.
Theming
Styles are plain CSS custom properties (--sft-*) — no Tailwind. Dark mode
follows prefers-color-scheme or an explicit <html data-theme="dark">.
License
MIT © Sunghoon Lee