@dcs-tech/ui 0.2.0 → 0.3.0

package/README.md

@@ -35,9 +35,40 @@ export const Example = () => (
 - **Primitives** — Button, Typography, Tooltip
 - **Layout** — Collapsible, FieldWrapper
 - **Composites** — Form, Fields, EditableTable
+- **Data** — DataTable (client data or a server `dataSource`: views, search, filters,
+  sort, grouping, column chooser, table / card / split layouts, selection + bulk
+  actions, header / footer summaries with charts, export to xlsx / pdf / csv / html /
+  json / xml) and Charts (Chart, ColumnChart, BarList, Donut, Progress, Legend,
+  ChartTable, LineChart, Funnel, Gauge, Treemap, … with a picture menu)
+- **Scroll** — one scrollbar rule (thin, hidden until needed) in `style.css`, edge
+  fades (`.scroll-fade-x` / `.scroll-fade-y`) and `ScrollStrip` for tab / chip rows.
+  `UIProvider` starts its listener; without it, mount `<ScrollRule />` once
 - **Tokens** — a hue-variable theme: `--primary-hue: 211` retints the whole palette
   from one number, with light and dark themes keyed off `data-theme`
 
+### DataTable and Charts
+
+```tsx
+import { DataTable, Donut, type DataTableView } from '@dcs-tech/ui';
+
+const view: DataTableView<Order> = {
+  id: 'all', rowKey: 'id',
+  columns: [
+    { key: 'customer', header: 'Customer' },
+    { key: 'amount', header: 'Amount', type: 'number', align: 'right', summable: true },
+  ],
+  export: { quick: { filename: 'Orders' } },
+};
+
+<DataTable data={orders} views={[view]} tableId="orders" />;          // client mode
+<DataTable dataSource={source} views={[view]} tableId="orders" />;    // server mode
+<Donut ariaLabel="By status" slices={[{ key: 'a', label: 'Open', value: 12, slot: 1 }]} />;
+```
+
+The table's runtime dependencies (`@tanstack/react-table`, `@tanstack/react-virtual`,
+`@tanstack/match-sorter-utils`, `exceljs`, `pdfmake` — loaded on the first PDF export —
+and `react-icons`) install with the package.
+
 ## Theming
 
 Every colour, size and spacing value is a CSS custom property. Override them on