blunt-ui 0.3.1 → 0.3.2

package/README.md

@@ -1,6 +1,6 @@
 # blunt-ui
 
-React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 9 components, 2 hooks.
+React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 11 components, 3 hooks.
 
 **Live demo:** https://blunt-ui.vercel.app/
 
@@ -179,6 +179,106 @@ const { values, errors, handleChange, handleBlur, handleSubmit, reset } =
 
 The `name` on each input needs to match the key in `initialValues`. Use `reset()` to clear everything back to the start.
 
+## Table
+
+Read-only table with sorting and pagination. You define columns, pass data, done. Sorting and pagination work in both uncontrolled mode (component handles state internally) and controlled mode (you own the state, useful when data comes from an API).
+
+Sizes: `sm`, `md`, `lg`.
+
+```tsx
+const columns = [
+  { key: "name", header: "Name", sortable: true },
+  { key: "role", header: "Role" },
+  { key: "status", header: "Status", render: (v) => <Badge>{v}</Badge> },
+];
+
+<Table
+  columns={columns}
+  data={rows}
+  rowKey="id"
+  striped
+  bordered
+  pageSize={10}
+  emptyMessage="No results"
+/>;
+```
+
+**Sorting** — add `sortable: true` to any column. By default the table sorts client-side. If you want to handle it yourself (e.g. send a query param to your backend), pass `sort` + `onSortChange` and it becomes controlled — the table just shows the sort indicator and tells you when it changed, you bring the sorted data.
+
+**Pagination** — set `pageSize` and the table slices the data automatically. For server-side pagination, also pass `totalRows` so it knows how many pages there are, and control `page` + `onPageChange` yourself. If you need both sort and page in one callback, use `onChange` instead.
+
+**Other stuff** — `loading` replaces rows with skeleton cells while data is loading. `stickyHeader` keeps the header in view when the table scrolls. `caption` adds a proper `<caption>` for accessibility.
+
+Color props: `borderColor`, `headerColor`, `rowColor`, `stripeColor`.
+
+## DataTable
+
+Editable table — good for things like spreadsheet-style input or inline CRUD. Each column can be editable or not, and you can mix text inputs with dropdowns.
+
+```tsx
+const columns = [
+  { key: "name", header: "Name", editable: true },
+  { key: "qty", header: "Qty", editable: true, width: "80px" },
+  {
+    key: "status",
+    header: "Status",
+    editable: true,
+    options: [
+      { value: "todo", label: "To do" },
+      { value: "in_progress", label: "In progress" },
+      { value: "done", label: "Done" },
+    ],
+  },
+];
+
+<DataTable
+  columns={columns}
+  defaultData={[{ name: "Widget", qty: "1", status: "todo" }]}
+  onChange={(rows) => console.log(rows)}
+  deletable
+  addRowLabel="Add item"
+/>;
+```
+
+**Editing** — click a text cell to start editing, Enter to confirm, Escape to cancel. For select cells (columns with `options`), one click opens the dropdown directly; picking an option saves immediately. Tab and Shift+Tab move between editable cells. Tab past the last cell adds a new row automatically.
+
+**Select columns** — add `options: [{ value, label }]` to a column. The cell stores the `value` but displays the `label`. The column still needs `editable: true`.
+
+**Controlled vs uncontrolled** — same pattern as the rest of the library. Pass `defaultData` and forget about it, or pass `data` + `onChange` if you need to keep the data in your own state.
+
+**Per-cell editability** — `editable` can be a function `(row, rowIndex) => boolean` if you need some cells to be editable based on row content.
+
+`deletable` adds a remove button per row. `newRowFactory` lets you control what an empty new row looks like (useful if you need generated IDs or default values).
+
+Color props: `borderColor`, `headerColor`.
+
+## useTable
+
+Helper hook for when your table data comes from a server. It keeps track of the current sort and page so you can use them in a fetch call, and passes them back to `<Table>` as controlled props.
+
+```tsx
+const { sort, page, onSortChange, onPageChange } = useTable({
+  defaultPage: 1,
+});
+
+useEffect(() => {
+  fetchProducts({ sort, page });
+}, [sort, page]);
+
+<Table
+  columns={columns}
+  data={serverData}
+  sort={sort}
+  onSortChange={onSortChange}
+  page={page}
+  onPageChange={onPageChange}
+  pageSize={20}
+  totalRows={totalCount}
+/>;
+```
+
+When the user changes the sort column, the page resets to 1 automatically — that's usually what you want so you don't end up on page 5 of a different sort order. Pass `defaultSort` if you need a column sorted on first load.
+
 ## Design tokens
 
 Colors, spacing, font sizes, and border radius live in `src/consts.ts`. All components pull from there, so changing a token updates everything at once.

package/dist/components/DataTable/DataTable.stories.d.ts

@@ -9,5 +9,6 @@ export declare const MixedEditable: Story;
 export declare const PerCellEditable: Story;
 export declare const CustomColors: Story;
 export declare const KeyboardNavigation: Story;
+export declare const WithSelectColumn: Story;
 export declare const StartsEmpty: Story;
 export declare const Controlled: Story;

package/dist/components/DataTable/DataTable.types.d.ts

@@ -1,11 +1,16 @@
 import { CSSProperties, ReactNode } from 'react';
 import { TableSizes } from '../Table/Table.types';
 export type { TableSizes };
+export interface DataTableSelectOption {
+    value: string;
+    label: string;
+}
 export interface DataTableColumn<T = Record<string, unknown>> {
     key: keyof T & string;
     header: string;
     width?: string;
     editable?: boolean | ((row: T, rowIndex: number) => boolean);
+    options?: DataTableSelectOption[];
     render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
 }
 export interface DataTableProps<T extends Record<string, unknown> = Record<string, unknown>> {

package/dist/components/DataTable/index.d.ts

@@ -1,2 +1,2 @@
 export { DataTable } from './DataTable';
-export type { DataTableProps, DataTableColumn } from './DataTable.types';
+export type { DataTableProps, DataTableColumn, DataTableSelectOption, } from './DataTable.types';

package/dist/components/Table/Table.stories.d.ts

@@ -4,22 +4,13 @@ declare const meta: Meta<typeof Table>;
 export default meta;
 type Story = StoryObj<typeof Table>;
 export declare const Default: Story;
-export declare const Striped: Story;
-export declare const Bordered: Story;
 export declare const StripedAndBordered: Story;
-export declare const Small: Story;
-export declare const Large: Story;
-export declare const WithCaption: Story;
 export declare const WithCustomRender: Story;
 export declare const Sortable: Story;
 export declare const SortableControlled: Story;
+export declare const WithUseTable: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
 export declare const Paginated: Story;
-export declare const PaginatedSortable: Story;
 export declare const StickyHeader: Story;
-export declare const ColumnWidths: Story;
-export declare const CustomBorderColor: Story;
-export declare const CustomHeaderColor: Story;
-export declare const CustomRowColors: Story;
 export declare const FullyCustomized: Story;

package/dist/components/Table/Table.types.d.ts

@@ -27,7 +27,7 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     caption?: string;
     emptyMessage?: string;
     loading?: boolean;
-    sort?: SortState;
+    sort?: SortState | null;
     defaultSort?: SortState;
     onSortChange?: (sort: SortState | null) => void;
     pageSize?: number;

package/dist/components/Table/index.d.ts

@@ -1,2 +1,4 @@
 export { Table } from './Table';
 export type { TableProps, TableColumn, TableSizes, SortState, SortDirection, TableChangeState, } from './Table.types';
+export { useTable } from './useTable';
+export type { UseTableOptions, UseTableReturn } from './useTable';

package/dist/components/Table/useTable.d.ts

@@ -0,0 +1,12 @@
+import { SortState } from './Table.types';
+export interface UseTableOptions {
+    defaultSort?: SortState;
+    defaultPage?: number;
+}
+export interface UseTableReturn {
+    sort: SortState | null;
+    page: number;
+    onSortChange: (sort: SortState | null) => void;
+    onPageChange: (page: number) => void;
+}
+export declare function useTable({ defaultSort, defaultPage, }?: UseTableOptions): UseTableReturn;

package/dist/components/Table/useTableSort.d.ts

@@ -1,7 +1,7 @@
 import { SortState } from './Table.types';
 interface UseTableSortProps<T> {
     data: T[];
-    sort?: SortState;
+    sort?: SortState | null;
     defaultSort?: SortState;
     onSortChange?: (sort: SortState | null) => void;
 }