react-glide-table 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +59 -7
  2. package/dist/index.cjs +945 -0
  3. package/dist/index.d.cts +73 -6
  4. package/dist/index.d.ts +73 -6
  5. package/dist/index.js +942 -0
  6. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ComponentType, RefObject } from 'react';
3
- import { ColumnDef, RowSelectionState, Updater, Row, Table } from '@tanstack/react-table';
2
+ import { ReactNode, ComponentType, RefObject, ReactElement } from 'react';
3
+ import { ColumnDef, RowSelectionState, Updater, Row, Table as Table$1 } from '@tanstack/react-table';
4
4
  export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
5
5
  import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
6
6
 
@@ -92,6 +92,10 @@ type DataTableProps<T extends Record<string, unknown>> = {
92
92
  columnId: string;
93
93
  value: unknown;
94
94
  }>) => void;
95
+ /**
96
+ * Root className hook (combined with `DataTableJSX`).
97
+ * The package ships no CSS — style these hooks yourself or leave unstyled.
98
+ */
95
99
  className?: string;
96
100
  /** Expand key field. Enables tree conversion / expand UI when set. Default `id` */
97
101
  toggleField?: string;
@@ -117,8 +121,8 @@ type DataTableProps<T extends Record<string, unknown>> = {
117
121
  /** Virtualization overscan row count. Default 8 */
118
122
  virtualOverscan?: number;
119
123
  /**
120
- * Optional UI part replacements for the reference DataTable renderer.
121
- * Works with the playground `createTable` / `Table.Column` API.
124
+ * Optional UI part replacements for the unstyled DataTable renderer.
125
+ * Use with `createTable` / `Table.Column`, or pass columns directly to `DataTable`.
122
126
  */
123
127
  slots?: DataTableSlots<T>;
124
128
  };
@@ -137,8 +141,15 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
137
141
  virtualIndex?: number;
138
142
  measureElement?: (node: Element | null) => void;
139
143
  };
144
+ /**
145
+ * Slot replacements for the default DataTable shell (semantic HTML + behavior only).
146
+ * Row-level custom UI → `Row`; cell content → `Table.Column` / column `render`.
147
+ * Header/Cell are not split into separate slots in this contract.
148
+ */
140
149
  type DataTableSlots<T extends Record<string, unknown>> = {
150
+ /** Top summary / actions region */
141
151
  Toolbar?: ComponentType<DataTableToolbarSlotProps>;
152
+ /** Full row replacement (cells, selection, edit UI) */
142
153
  Row?: ComponentType<DataTableRowSlotProps<T>>;
143
154
  /** Replace the pending state view */
144
155
  Pending?: ComponentType<{
@@ -312,7 +323,7 @@ type DataTableRowContextValue = {
312
323
 
313
324
  type UseGlideTableOptions<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "className" | "slots" | "summary" | "toolbar" | "isPending" | "totalCount" | "filteredCount">;
314
325
  type UseGlideTableResult<T extends Record<string, unknown>> = {
315
- table: Table<T>;
326
+ table: Table$1<T>;
316
327
  tableData: T[];
317
328
  rows: Row<T>[];
318
329
  columnCount: number;
@@ -412,4 +423,60 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
412
423
  declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
413
424
  declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
414
425
 
415
- export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_DATA_TABLE_LABELS, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, type DataTableLabels, type DataTableProps, type DataTableSlots, type DragState, type EditingCell, type RowSelectionMode, type RowSpanInfo, type TableColumnProps, type TableProps, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveDataTableLabels, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };
426
+ /**
427
+ * Unstyled DataTable shell: semantic HTML + interaction behavior.
428
+ * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
429
+ * Customize via `className`, column `className` / `headerClassName`, `labels`,
430
+ * `summary` / `toolbar`, `Column.render`, and `slots`.
431
+ */
432
+ declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
433
+
434
+ /** Body slot marker. DataTable renders the actual tbody. */
435
+ declare function TableBody(): null;
436
+ declare namespace TableBody {
437
+ var displayName: string;
438
+ }
439
+
440
+ /** Used only inside Table.Header. Registers a column definition; does not render DOM. */
441
+ declare function TableColumn<T extends Record<string, unknown>, K extends string = keyof T & string>(props: TableColumnProps<T, K>): null;
442
+ declare namespace TableColumn {
443
+ var displayName: string;
444
+ }
445
+
446
+ type TableHeaderProps = {
447
+ children: ReactNode;
448
+ };
449
+ /** Column declaration slot. Does not render DOM. */
450
+ declare function TableHeader(props: TableHeaderProps): null;
451
+ declare namespace TableHeader {
452
+ var displayName: string;
453
+ }
454
+
455
+ type TablePaginationProps = {
456
+ page: number;
457
+ pageSize?: number;
458
+ totalCount?: number;
459
+ onChange: (page: number) => void;
460
+ className?: string;
461
+ };
462
+ declare function TablePagination({ page, pageSize, totalCount, onChange, className, }: TablePaginationProps): react.JSX.Element;
463
+ declare namespace TablePagination {
464
+ var displayName: string;
465
+ }
466
+
467
+ type TableCompoundComponent<T extends Record<string, unknown>> = ((props: TableProps<T>) => ReactElement) & {
468
+ Header: typeof TableHeader;
469
+ Column: <K extends string>(props: TableColumnProps<T, K>) => null;
470
+ Body: typeof TableBody;
471
+ Pagination: typeof TablePagination;
472
+ };
473
+ declare function TableRoot<T extends Record<string, unknown>>({ data, children, className, totalCount, filteredCount, ...dataTableProps }: TableProps<T>): react.JSX.Element;
474
+ declare function createTable<T extends Record<string, unknown>>(): TableCompoundComponent<T>;
475
+ declare const Table: typeof TableRoot & {
476
+ Header: typeof TableHeader;
477
+ Column: typeof TableColumn;
478
+ Body: typeof TableBody;
479
+ Pagination: typeof TablePagination;
480
+ };
481
+
482
+ export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_DATA_TABLE_LABELS, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTable, type DataTableLabels, type DataTableProps, type DataTableSlots, type DragState, type EditingCell, type RowSelectionMode, type RowSpanInfo, Table, type TableColumnProps, type TableCompoundComponent, type TableProps, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, createTable, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveDataTableLabels, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ComponentType, RefObject } from 'react';
3
- import { ColumnDef, RowSelectionState, Updater, Row, Table } from '@tanstack/react-table';
2
+ import { ReactNode, ComponentType, RefObject, ReactElement } from 'react';
3
+ import { ColumnDef, RowSelectionState, Updater, Row, Table as Table$1 } from '@tanstack/react-table';
4
4
  export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
5
5
  import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
6
6
 
@@ -92,6 +92,10 @@ type DataTableProps<T extends Record<string, unknown>> = {
92
92
  columnId: string;
93
93
  value: unknown;
94
94
  }>) => void;
95
+ /**
96
+ * Root className hook (combined with `DataTableJSX`).
97
+ * The package ships no CSS — style these hooks yourself or leave unstyled.
98
+ */
95
99
  className?: string;
96
100
  /** Expand key field. Enables tree conversion / expand UI when set. Default `id` */
97
101
  toggleField?: string;
@@ -117,8 +121,8 @@ type DataTableProps<T extends Record<string, unknown>> = {
117
121
  /** Virtualization overscan row count. Default 8 */
118
122
  virtualOverscan?: number;
119
123
  /**
120
- * Optional UI part replacements for the reference DataTable renderer.
121
- * Works with the playground `createTable` / `Table.Column` API.
124
+ * Optional UI part replacements for the unstyled DataTable renderer.
125
+ * Use with `createTable` / `Table.Column`, or pass columns directly to `DataTable`.
122
126
  */
123
127
  slots?: DataTableSlots<T>;
124
128
  };
@@ -137,8 +141,15 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
137
141
  virtualIndex?: number;
138
142
  measureElement?: (node: Element | null) => void;
139
143
  };
144
+ /**
145
+ * Slot replacements for the default DataTable shell (semantic HTML + behavior only).
146
+ * Row-level custom UI → `Row`; cell content → `Table.Column` / column `render`.
147
+ * Header/Cell are not split into separate slots in this contract.
148
+ */
140
149
  type DataTableSlots<T extends Record<string, unknown>> = {
150
+ /** Top summary / actions region */
141
151
  Toolbar?: ComponentType<DataTableToolbarSlotProps>;
152
+ /** Full row replacement (cells, selection, edit UI) */
142
153
  Row?: ComponentType<DataTableRowSlotProps<T>>;
143
154
  /** Replace the pending state view */
144
155
  Pending?: ComponentType<{
@@ -312,7 +323,7 @@ type DataTableRowContextValue = {
312
323
 
313
324
  type UseGlideTableOptions<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "className" | "slots" | "summary" | "toolbar" | "isPending" | "totalCount" | "filteredCount">;
314
325
  type UseGlideTableResult<T extends Record<string, unknown>> = {
315
- table: Table<T>;
326
+ table: Table$1<T>;
316
327
  tableData: T[];
317
328
  rows: Row<T>[];
318
329
  columnCount: number;
@@ -412,4 +423,60 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
412
423
  declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
413
424
  declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
414
425
 
415
- export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_DATA_TABLE_LABELS, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, type DataTableLabels, type DataTableProps, type DataTableSlots, type DragState, type EditingCell, type RowSelectionMode, type RowSpanInfo, type TableColumnProps, type TableProps, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveDataTableLabels, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };
426
+ /**
427
+ * Unstyled DataTable shell: semantic HTML + interaction behavior.
428
+ * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
429
+ * Customize via `className`, column `className` / `headerClassName`, `labels`,
430
+ * `summary` / `toolbar`, `Column.render`, and `slots`.
431
+ */
432
+ declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
433
+
434
+ /** Body slot marker. DataTable renders the actual tbody. */
435
+ declare function TableBody(): null;
436
+ declare namespace TableBody {
437
+ var displayName: string;
438
+ }
439
+
440
+ /** Used only inside Table.Header. Registers a column definition; does not render DOM. */
441
+ declare function TableColumn<T extends Record<string, unknown>, K extends string = keyof T & string>(props: TableColumnProps<T, K>): null;
442
+ declare namespace TableColumn {
443
+ var displayName: string;
444
+ }
445
+
446
+ type TableHeaderProps = {
447
+ children: ReactNode;
448
+ };
449
+ /** Column declaration slot. Does not render DOM. */
450
+ declare function TableHeader(props: TableHeaderProps): null;
451
+ declare namespace TableHeader {
452
+ var displayName: string;
453
+ }
454
+
455
+ type TablePaginationProps = {
456
+ page: number;
457
+ pageSize?: number;
458
+ totalCount?: number;
459
+ onChange: (page: number) => void;
460
+ className?: string;
461
+ };
462
+ declare function TablePagination({ page, pageSize, totalCount, onChange, className, }: TablePaginationProps): react.JSX.Element;
463
+ declare namespace TablePagination {
464
+ var displayName: string;
465
+ }
466
+
467
+ type TableCompoundComponent<T extends Record<string, unknown>> = ((props: TableProps<T>) => ReactElement) & {
468
+ Header: typeof TableHeader;
469
+ Column: <K extends string>(props: TableColumnProps<T, K>) => null;
470
+ Body: typeof TableBody;
471
+ Pagination: typeof TablePagination;
472
+ };
473
+ declare function TableRoot<T extends Record<string, unknown>>({ data, children, className, totalCount, filteredCount, ...dataTableProps }: TableProps<T>): react.JSX.Element;
474
+ declare function createTable<T extends Record<string, unknown>>(): TableCompoundComponent<T>;
475
+ declare const Table: typeof TableRoot & {
476
+ Header: typeof TableHeader;
477
+ Column: typeof TableColumn;
478
+ Body: typeof TableBody;
479
+ Pagination: typeof TablePagination;
480
+ };
481
+
482
+ export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_DATA_TABLE_LABELS, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTable, type DataTableLabels, type DataTableProps, type DataTableSlots, type DragState, type EditingCell, type RowSelectionMode, type RowSpanInfo, Table, type TableColumnProps, type TableCompoundComponent, type TableProps, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, createTable, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveDataTableLabels, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };