react-shadcn-table 1.0.0

package/dist/package/ui/grid/sections/center/feedback/GridCenterSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare const GridCenterSkeleton: () => import("react").JSX.Element;
+export default GridCenterSkeleton;

package/dist/package/ui/grid/sections/end/GridEnd.d.ts

@@ -0,0 +1,2 @@
+declare const GridEnd: () => import("react").JSX.Element;
+export default GridEnd;

package/dist/package/ui/grid/sections/end/GridEndBody.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const GridEndBody: () => React.JSX.Element;
+export default GridEndBody;

package/dist/package/ui/grid/sections/end/GridEndHeader.d.ts

@@ -0,0 +1,2 @@
+declare const GridEndHeader: () => import("react").JSX.Element;
+export default GridEndHeader;

package/dist/package/ui/grid/sections/end/GridEndRowPin.d.ts

@@ -0,0 +1,5 @@
+import { GridFeatures } from '../../../../features';
+import { Row, RowData } from '@tanstack/react-table';
+export declare function GridEndRowPin({ row }: {
+    row: Row<GridFeatures, RowData>;
+}): import("react").JSX.Element;

package/dist/package/ui/grid/sections/end/feedback/GridEndEmpty.d.ts

@@ -0,0 +1,2 @@
+declare const GridEndEmpty: () => import("react").JSX.Element;
+export default GridEndEmpty;

package/dist/package/ui/grid/sections/end/feedback/GridEndSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare const GridEndSkeleton: () => import("react").JSX.Element;
+export default GridEndSkeleton;

package/dist/package/ui/grid/sections/start/GridStart.d.ts

@@ -0,0 +1,2 @@
+declare const GridStart: () => import("react").JSX.Element;
+export default GridStart;

package/dist/package/ui/grid/sections/start/GridStartBody.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const GridStartBody: () => React.JSX.Element;
+export default GridStartBody;

package/dist/package/ui/grid/sections/start/GridStartHeader.d.ts

@@ -0,0 +1,2 @@
+declare const GridStartHeader: () => import("react").JSX.Element;
+export default GridStartHeader;

package/dist/package/ui/grid/sections/start/GridStartRowPin.d.ts

@@ -0,0 +1,5 @@
+import { GridFeatures } from '../../../../features';
+import { Row, RowData } from '@tanstack/react-table';
+export declare function GridStartRowPin({ row }: {
+    row: Row<GridFeatures, RowData>;
+}): import("react").JSX.Element;

package/dist/package/ui/grid/sections/start/feedback/GridStartEmpty.d.ts

@@ -0,0 +1,2 @@
+declare const GridStartEmpty: () => import("react").JSX.Element;
+export default GridStartEmpty;

package/dist/package/ui/grid/sections/start/feedback/GridStartSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare const GridStartSkeleton: () => import("react").JSX.Element;
+export default GridStartSkeleton;

package/dist/package/ui/grid/shared/GridCell.d.ts

@@ -0,0 +1,6 @@
+import { GridFeatures } from '../../../features';
+import { Cell, RowData } from '@tanstack/react-table';
+declare const GridCell: ({ cell }: {
+    cell: Cell<GridFeatures, RowData, unknown>;
+}) => import("react").JSX.Element | null;
+export default GridCell;

package/dist/package/ui/grid/shared/GridHead.d.ts

@@ -0,0 +1,6 @@
+import { GridFeatures } from '../../../features';
+import { Header, RowData } from '@tanstack/react-table';
+declare const GridHead: ({ header, }: {
+    header: Header<GridFeatures, RowData, unknown>;
+}) => import("react").JSX.Element;
+export default GridHead;

package/dist/package/ui/grid/shared/feedback/GridRowSkeleton.d.ts

@@ -0,0 +1,8 @@
+import { GridFeatures } from '../../../../features';
+import { Column, RowData } from '@tanstack/react-table';
+declare const GridRowSkeleton: ({ column, i, j, }: {
+    column: Column<GridFeatures, RowData, unknown>;
+    i: number;
+    j: number;
+}) => import("react").JSX.Element;
+export default GridRowSkeleton;

package/dist/package/ui/header/HeaderFilter.d.ts

@@ -0,0 +1,6 @@
+import { GridFeatures } from '../../features';
+import { Column, RowData } from '@tanstack/react-table';
+declare const HeaderFilter: ({ column, }: {
+    column: Column<GridFeatures, RowData, unknown>;
+}) => import("react").JSX.Element | null;
+export default HeaderFilter;

package/dist/package/ui/header/HeaderMenu.d.ts

@@ -0,0 +1,6 @@
+import { GridFeatures } from '../../features';
+import { Header, RowData } from '@tanstack/react-table';
+declare const HeaderMenu: ({ header, }: {
+    header: Header<GridFeatures, RowData, unknown>;
+}) => import("react").JSX.Element | null;
+export default HeaderMenu;

package/dist/package/ui/header/HeaderResizing.d.ts

@@ -0,0 +1,6 @@
+import { GridFeatures } from '../../features';
+import { Header, RowData } from '@tanstack/react-table';
+declare const HeaderResizing: ({ header, }: {
+    header: Header<GridFeatures, RowData, unknown>;
+}) => import("react").JSX.Element;
+export default HeaderResizing;

package/dist/package/ui/header/HeaderSort.d.ts

@@ -0,0 +1,6 @@
+import { GridFeatures } from '../../features';
+import { Header, RowData } from '@tanstack/react-table';
+declare const HeaderSort: ({ header, }: {
+    header: Header<GridFeatures, RowData, unknown>;
+}) => import("react").JSX.Element;
+export default HeaderSort;

package/dist/package/ui/pagination/index.d.ts

@@ -0,0 +1,2 @@
+declare const Pagination: () => import("react").JSX.Element;
+export default Pagination;

package/dist/package/ui/toolbar/right/ToolbarRightColumns.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ToolbarRightColumns: () => React.JSX.Element;
+export default ToolbarRightColumns;

package/dist/package/ui/toolbar/right/ToolbarRightDnd.d.ts

@@ -0,0 +1,2 @@
+declare const ToolbarDnd: () => import("react").JSX.Element;
+export default ToolbarDnd;

package/dist/package/ui/toolbar/right/ToolbarRightFilter.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ToolbarFilters: () => React.JSX.Element;
+export default ToolbarFilters;

package/dist/package/ui/toolbar/right/ToolbarRightRows.d.ts

@@ -0,0 +1,2 @@
+declare const ToolbarRightRows: () => import("react").JSX.Element;
+export default ToolbarRightRows;

package/dist/package/ui/toolbar/right/ToolbarRightSettings.d.ts

@@ -0,0 +1,2 @@
+declare const ToolbarRightSettings: () => import("react").JSX.Element;
+export default ToolbarRightSettings;

package/dist/package/ui/toolbar/right/index.d.ts

@@ -0,0 +1,4 @@
+declare const ToolbarRight: ({ height }: {
+    height: number;
+}) => import("react").JSX.Element;
+export default ToolbarRight;

package/dist/package/ui/toolbar/top/index.d.ts

@@ -0,0 +1,2 @@
+declare const TopToolbar: () => import("react").JSX.Element;
+export default TopToolbar;

package/dist/package/utils/URLSearch.d.ts

@@ -0,0 +1,57 @@
+interface ColumnFilter {
+    id: string;
+    value: unknown;
+}
+interface SortingItem {
+    id: string;
+    desc: boolean;
+}
+interface Pagination {
+    pageIndex: number;
+    pageSize: number;
+}
+interface QueryArgs {
+    columnFilters: ColumnFilter[];
+    globalFilter?: string;
+    pagination: Pagination;
+    sorting: SortingItem[];
+    rowSelection?: Record<string, boolean>;
+}
+/**
+ * Builds a MongoDB/Express-style URL query string from a TanStack Table
+ * state object (`QueryArgs`), suitable for sending to a REST API backend
+ * that expects `page`, `limit`, `sort`, `q`, and per-field filter params.
+ *
+ * Behavior:
+ * - `pagination.pageIndex` is converted from 0-based (TanStack) to 1-based
+ *   (`page`) and `pagination.pageSize` is sent as `limit`.
+ * - Each entry in `columnFilters` is expanded via {@link appendColumnFilter}
+ *   (supports plain values, range tuples, and Mongo operator objects).
+ * - `sorting` is joined into a single comma-separated `sort` param, prefixing
+ *   descending fields with `-` (e.g. `sorting: [{ id: 'year', desc: true }]`
+ *   → `sort=-year`). Omitted entirely if `sorting` is empty.
+ * - `globalFilter`, if provided and non-empty, is sent as `q`.
+ * - `rowSelection` is accepted in the input type but is **not** included in
+ *   the resulting query string.
+ *
+ * @param queryArgs - The current TanStack Table state to serialize.
+ * @returns A URL query string (including the leading `?`), e.g.
+ *   `"?page=1&limit=20&status=active&sort=-year"`.
+ *
+ * @example
+ * ```ts
+ * const query = URLSearch({
+ *   pagination: { pageIndex: 0, pageSize: 20 },
+ *   columnFilters: [
+ *     { id: 'status', value: 'active' },
+ *     { id: 'year', value: [2020, 2023] },
+ *   ],
+ *   sorting: [{ id: 'year', desc: true }],
+ *   globalFilter: 'toyota',
+ * });
+ *
+ * // query === "?page=1&limit=20&status=active&year[gte]=2020&year[lte]=2023&sort=-year&q=toyota"
+ * ```
+ */
+export declare function URLSearch(queryArgs: QueryArgs): string;
+export {};

package/dist/package/utils/buildQueryString.d.ts

@@ -0,0 +1,2 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+export declare const buildQueryParams: (filters: ColumnFiltersState) => string;

package/dist/package/utils/buildSortString.d.ts

@@ -0,0 +1,4 @@
+export declare function buildSortString(sortOptions: {
+    id: string;
+    desc: boolean;
+}[] | null | undefined): string;

package/dist/package/utils/getPinStyles.d.ts

@@ -0,0 +1,4 @@
+import { Column, RowData } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+import { GridFeatures } from '../features';
+export declare const getPinStyles: (column: Column<GridFeatures, RowData>, isSplit: boolean) => CSSProperties;

package/dist/package/utils/pluckSelected.d.ts

@@ -0,0 +1,40 @@
+import { RowSelectionState } from '@tanstack/react-table';
+/**
+ * Extracts the value of a specific field from all currently selected rows
+ * in a TanStack Table instance.
+ *
+ * Assumes `rowSelection` keys correspond directly to the index of the row
+ * in the `data` array (i.e. no custom `getRowId` is used). If a custom
+ * `getRowId` is configured on the table, this function will not work as
+ * expected since the keys will be custom IDs instead of indices.
+ *
+ * @template T - The type of a single row's data.
+ * @template K - The key of the field to extract from each selected row.
+ *
+ * @param data - The full array of row data (same array passed to the table).
+ * @param rowSelection - The current `rowSelection` state from TanStack Table,
+ *   where keys are row indices (as strings) and values are `true`/`false`.
+ * @param field - The field name (key of `T`) whose value should be extracted
+ *   from each selected row.
+ *
+ * @returns An array containing the value of `field` for every selected row.
+ *   Rows that no longer exist in `data` (e.g. stale selection) are skipped.
+ *
+ * @example
+ * ```ts
+ * const rowSelection = { "0": true, "2": true, "3": true };
+ * const data = [
+ *   { id: "V001", driver: "John" },
+ *   { id: "V002", driver: "Sam" },
+ *   { id: "V003", driver: "Alex" },
+ *   { id: "V004", driver: "Mia" },
+ * ];
+ *
+ * pluckSelected(data, rowSelection, 'id');
+ * // => ["V001", "V003", "V004"]
+ *
+ * pluckSelected(data, rowSelection, 'driver');
+ * // => ["John", "Alex", "Mia"]
+ * ```
+ */
+export declare function pluckSelected<T, K extends keyof T>(data: T[], rowSelection: RowSelectionState, field: K): T[K][];

package/dist/package/utils/printTable.d.ts

@@ -0,0 +1 @@
+export declare function printTable(title: string, headers: string[], rows: unknown[][]): void;

package/dist/package/utils/toTsv.d.ts

@@ -0,0 +1,2 @@
+export declare function escapeTsvValue(value: unknown): string;
+export declare function toTsv(ranges: Array<Array<Array<unknown>>>): string;

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "react-shadcn-table",
+  "private": false,
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jsdev-robin/react-shadcn-table.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jsdev-robin/react-shadcn-table/issues"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-hotkeys": "^0.10.0",
+    "@tanstack/react-pacer": "^0.23.0",
+    "@tanstack/react-store": "^0.11.1",
+    "@tanstack/react-table": "^9.1.2",
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.8",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@eslint/js": "^10.0.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.8.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "clsx": "^2.1.1",
+    "vite-plugin-dts": "^5.0.3",
+    "shadcn": "^4.18.0",
+    "tailwind-merge": "^3.6.0",
+    "class-variance-authority": "^0.7.1",
+    "tw-animate-css": "^1.4.0",
+    "lucide-react": "^1.31.0",
+    "radix-ui": "^1.6.7"
+  },
+  "keywords": [
+    "react",
+    "table",
+    "data-table",
+    "shadcn",
+    "shadcn-ui",
+    "tanstack-table",
+    "radix-ui",
+    "tailwindcss",
+    "typescript",
+    "vite",
+    "dnd-kit",
+    "drag-and-drop",
+    "xlsx",
+    "excel-export",
+    "pdf-export",
+    "ui-components"
+  ]
+}