@sqlrooms/data-table 0.24.4 → 0.24.6

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.
@@ -28,7 +28,7 @@ import QueryDataTable from './QueryDataTable';
28
28
  * ```
29
29
  */
30
30
  const DataTableModal = ({ className, title, query, tableModal }) => {
31
- return (_jsx(Dialog, { open: tableModal.isOpen, onOpenChange: (isOpen) => !isOpen && tableModal.onClose(), children: _jsxs(DialogContent, { className: cn('h-[80vh] max-w-[75vw]', className), "aria-describedby": "data-table-modal", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title ? `Table "${title}"` : '' }), _jsx(DialogDescription, { className: "hidden", children: title })] }), _jsx("div", { className: "bg-muted flex-1 overflow-hidden", children: tableModal.isOpen && query ? _jsx(QueryDataTable, { query: query }) : null }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "outline", onClick: tableModal.onClose, children: "Close" }) })] }) }));
31
+ return (_jsx(Dialog, { open: tableModal.isOpen, onOpenChange: (isOpen) => !isOpen && tableModal.onClose(), children: _jsxs(DialogContent, { className: cn('h-[80vh] max-w-[75vw]', className), "aria-describedby": "data-table-modal", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title ?? '' }), _jsx(DialogDescription, { className: "hidden", children: title })] }), _jsx("div", { className: "bg-muted flex-1 overflow-hidden", children: tableModal.isOpen && query ? _jsx(QueryDataTable, { query: query }) : null }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "outline", onClick: tableModal.onClose, children: "Close" }) })] }) }));
32
32
  };
33
33
  export default DataTableModal;
34
34
  //# sourceMappingURL=DataTableModal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataTableModal.js","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,EAAE,EACF,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,GAEZ,MAAM,cAAc,CAAC;AAEtB,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,cAAc,GAKf,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAC,EAAE,EAAE;IAC7C,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,MAAM,EACvB,YAAY,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU,CAAC,OAAO,EAAE,YAElE,MAAC,aAAa,IACZ,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAChC,kBAAkB,aAEnC,MAAC,YAAY,eACX,KAAC,WAAW,cAAE,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAe,EAC5D,KAAC,iBAAiB,IAAC,SAAS,EAAC,QAAQ,YAAE,KAAK,GAAqB,IACpD,EACf,cAAK,SAAS,EAAC,iCAAiC,YAC7C,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,GACjE,EACN,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,UAAU,CAAC,OAAO,sBAE5C,GACI,IACD,GACT,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n Button,\n cn,\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n UseDisclosureReturnValue,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport QueryDataTable from './QueryDataTable';\n\n/**\n * A modal component for displaying a table with data from a SQL query.\n *\n * @component\n * @param props - Component props\n * @param props.title - The title of the table\n * @param props.query - The SQL query to execute and display in the table\n * @param props.tableModal - An object containing the modal's open state and close function\n *\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { DataTableModal } from '@sqlrooms/data-table';\n *\n * const MyComponent = () => {\n * const tableModal = useDisclosure();\n * return (\n * <DataTableModal\n * title=\"Users\"\n * query=\"SELECT * FROM users LIMIT 10\"\n * tableModal={tableModal}\n * />\n * );\n * };\n * ```\n */\nconst DataTableModal: FC<{\n className?: string;\n title: string | undefined;\n query: string | undefined;\n tableModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n}> = ({className, title, query, tableModal}) => {\n return (\n <Dialog\n open={tableModal.isOpen}\n onOpenChange={(isOpen: boolean) => !isOpen && tableModal.onClose()}\n >\n <DialogContent\n className={cn('h-[80vh] max-w-[75vw]', className)}\n aria-describedby=\"data-table-modal\"\n >\n <DialogHeader>\n <DialogTitle>{title ? `Table \"${title}\"` : ''}</DialogTitle>\n <DialogDescription className=\"hidden\">{title}</DialogDescription>\n </DialogHeader>\n <div className=\"bg-muted flex-1 overflow-hidden\">\n {tableModal.isOpen && query ? <QueryDataTable query={query} /> : null}\n </div>\n <DialogFooter>\n <Button variant=\"outline\" onClick={tableModal.onClose}>\n Close\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n};\n\nexport default DataTableModal;\n"]}
1
+ {"version":3,"file":"DataTableModal.js","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,EAAE,EACF,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,GAEZ,MAAM,cAAc,CAAC;AAEtB,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,cAAc,GAKf,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAC,EAAE,EAAE;IAC7C,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,MAAM,EACvB,YAAY,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU,CAAC,OAAO,EAAE,YAElE,MAAC,aAAa,IACZ,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAChC,kBAAkB,aAEnC,MAAC,YAAY,eACX,KAAC,WAAW,cAAE,KAAK,IAAI,EAAE,GAAe,EACxC,KAAC,iBAAiB,IAAC,SAAS,EAAC,QAAQ,YAAE,KAAK,GAAqB,IACpD,EACf,cAAK,SAAS,EAAC,iCAAiC,YAC7C,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,GACjE,EACN,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,UAAU,CAAC,OAAO,sBAE5C,GACI,IACD,GACT,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n Button,\n cn,\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n UseDisclosureReturnValue,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport QueryDataTable from './QueryDataTable';\n\n/**\n * A modal component for displaying a table with data from a SQL query.\n *\n * @component\n * @param props - Component props\n * @param props.title - The title of the table\n * @param props.query - The SQL query to execute and display in the table\n * @param props.tableModal - An object containing the modal's open state and close function\n *\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { DataTableModal } from '@sqlrooms/data-table';\n *\n * const MyComponent = () => {\n * const tableModal = useDisclosure();\n * return (\n * <DataTableModal\n * title=\"Users\"\n * query=\"SELECT * FROM users LIMIT 10\"\n * tableModal={tableModal}\n * />\n * );\n * };\n * ```\n */\nconst DataTableModal: FC<{\n className?: string;\n title: string | undefined;\n query: string | undefined;\n tableModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n}> = ({className, title, query, tableModal}) => {\n return (\n <Dialog\n open={tableModal.isOpen}\n onOpenChange={(isOpen: boolean) => !isOpen && tableModal.onClose()}\n >\n <DialogContent\n className={cn('h-[80vh] max-w-[75vw]', className)}\n aria-describedby=\"data-table-modal\"\n >\n <DialogHeader>\n <DialogTitle>{title ?? ''}</DialogTitle>\n <DialogDescription className=\"hidden\">{title}</DialogDescription>\n </DialogHeader>\n <div className=\"bg-muted flex-1 overflow-hidden\">\n {tableModal.isOpen && query ? <QueryDataTable query={query} /> : null}\n </div>\n <DialogFooter>\n <Button variant=\"outline\" onClick={tableModal.onClose}>\n Close\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n};\n\nexport default DataTableModal;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,uBAAuB,CAAC,IAAI,SAAS,MAAM,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAsB,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CA0O/B"}
1
+ {"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,uBAAuB,CAAC,IAAI,SAAS,MAAM,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAoB,EACpB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CA0O/B"}
@@ -9,7 +9,7 @@ import { useEffect, useMemo, useState } from 'react';
9
9
  * @param props
10
10
  * @returns
11
11
  */
12
- export default function DataTablePaginated({ className, fontSize = 'text-base', data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, }) {
12
+ export default function DataTablePaginated({ className, fontSize = 'text-xs', data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, }) {
13
13
  const defaultData = useMemo(() => [], []);
14
14
  const pageCount = pagination && numRows !== undefined
15
15
  ? Math.ceil(numRows / pagination.pageSize)
@@ -1 +1 @@
1
- {"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,aAAa,EACb,gBAAgB,IAAI,qBAAqB,EACzC,iBAAiB,IAAI,sBAAsB,EAC3C,eAAe,EACf,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,EACL,EAAE,EACF,UAAU,EACV,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAIL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAmBnD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAsB,EAC9D,SAAS,EACT,QAAQ,GAAG,WAAW,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,GACoB;IAC9B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1C,MAAM,SAAS,GACb,UAAU,IAAI,OAAO,KAAK,SAAS;QACjC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC1C,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI,EAAE,CAAC,IAAI,IAAI,WAAW,CAAU;QACpC,OAAO,EAAE,OAAO,IAAI,EAAE;QACtB,SAAS,EAAE,SAAS,IAAI,CAAC;QACzB,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,eAAe,EAAE,CAAC,MAAM,EAAE,EAAE;YAC1B,IAAI,eAAe,IAAI,OAAO,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;gBAC/D,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;QACD,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;YAC7B,IAAI,UAAU,IAAI,kBAAkB,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;gBACrE,kBAAkB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QACD,eAAe,EAAE,eAAe,EAAE;QAClC,gBAAgB,EAAE,IAAI;QACtB,KAAK,EAAE;YACL,UAAU;YACV,OAAO;SACR;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACxD,UAAU,EAAE,SAAS,IAAI,CAAC,CAC3B,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,oBAAoB,CAAC,UAAU,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,aACnE,cAAK,SAAS,EAAC,uDAAuD,YACpE,MAAC,UAAU,IAAC,SAAS,EAAC,sBAAsB,aAC1C,MAAC,KAAK,IAAC,cAAc,mBACnB,KAAC,WAAW,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,MAAC,QAAQ,eACP,KAAC,SAAS,IACR,SAAS,EAAE,gGAAgG,YAE1G,UAAU,CAAC,CAAC,CAAC,CACZ,cAAK,SAAS,EAAC,gFAAgF,GAAG,CACnG,CAAC,CAAC,CAAC,IAAI,GACE,EACX,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gDAClC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS;qDACjC,IAAuB,CAAC;gDAC3B,OAAO,CACL,KAAC,SAAS,IAER,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAClC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAC5C,QAAQ,CACT,EACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAEhD,eAAK,SAAS,EAAC,yBAAyB,aACrC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC7B,wBACG,UAAU,CACT,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9B,MAAM,CAAC,UAAU,EAAE,CACpB,GACG,CACP,EACA,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAC7B,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,CACvC,KAAC,eAAe,IAAC,SAAS,EAAC,SAAS,GAAG,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,GAAG,CACtC,CACF,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAC,QAAQ,GAAG,EAC1B,KAAC,KAAK,IACJ,OAAO,EAAC,SAAS,EACjB,SAAS,EAAE,2CAA2C,YAErD,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GACb,IACJ,IAjCD,MAAM,CAAC,EAAE,CAkCJ,CACb,CAAC;4CACJ,CAAC,CAAC,EACF,KAAC,SAAS,IAAC,SAAS,EAAC,4EAA4E,GAAG,KAlDvF,WAAW,CAAC,EAAE,CAmDlB,CACZ,CAAC,GACU,EACd,KAAC,SAAS,cACP,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,MAAC,QAAQ,IAAc,SAAS,EAAC,8BAA8B,aAC7D,KAAC,SAAS,IACR,SAAS,EAAE,0EAA0E,QAAQ,EAAE,YAE9F,UAAU;oDACT,CAAC,CAAC,GAAG,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;oDACzD,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GACJ,EACX,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gDAClC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAuB,CAAC;gDAC3D,OAAO,CACL,KAAC,SAAS,IAER,SAAS,EAAE,EAAE,CACX,sDAAsD,EACtD,QAAQ,EACR,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAC7C,YAEA,UAAU,CACT,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAC1B,IAAI,CAAC,UAAU,EAAE,CAClB,IAVI,IAAI,CAAC,EAAE,CAWF,CACb,CAAC;4CACJ,CAAC,CAAC,EACF,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,uBAAmB,KA1BrC,GAAG,CAAC,EAAE,CA2BV,CACZ,CAAC,GACQ,IACN,EACR,KAAC,SAAS,IAAC,WAAW,EAAC,UAAU,EAAC,SAAS,EAAC,MAAM,GAAG,EACrD,KAAC,SAAS,IAAC,WAAW,EAAC,YAAY,GAAG,IAC3B,GACT,EACL,UAAU,IAAI,aAAa,CAAC,CAAC,CAAC,CAC7B,eAAK,SAAS,EAAC,8FAA8F,aAC1G,UAAU,CAAC,CAAC,CAAC,CACZ,8BACE,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,YAErC,KAAC,qBAAqB,IAAC,SAAS,EAAC,SAAS,GAAG,GACtC,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,EACnC,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,YAErC,KAAC,eAAe,IAAC,SAAS,EAAC,SAAS,GAAG,GAChC,EACT,eAAK,SAAS,EAAE,gCAAgC,QAAQ,EAAE,aACxD,iCAAe,EACf,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,KAAK,CAAC,YAAY,EAAE,EACzB,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,iBAAiB,GAAG,CAAC,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oDACd,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oDAC7B,IAAI,KAAK,EAAE,CAAC;wDACV,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CACnB,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CACtD,CAAC;wDACF,oBAAoB,CAAC,IAAI,CAAC,CAAC;oDAC7B,CAAC;gDACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oDACX,IAAI,iBAAiB,KAAK,UAAU,EAAE,SAAS,EAAE,CAAC;wDAChD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;oDACxC,CAAC;gDACH,CAAC,GACD,EACF,wBAAM,MAAM,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,GAAO,IAClD,EACN,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC/B,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,YAEjC,KAAC,gBAAgB,IAAC,SAAS,EAAC,SAAS,GAAG,GACjC,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,EAC3D,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,YAEjC,KAAC,sBAAsB,IAAC,SAAS,EAAC,SAAS,GAAG,GACvC,EACT,MAAC,MAAM,IACL,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EACnD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAE1D,KAAC,aAAa,IAAC,SAAS,EAAC,eAAe,YACtC,KAAC,WAAW,KAAG,GACD,EAChB,KAAC,aAAa,cACX,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC1C,KAAC,UAAU,IAAgB,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,YAC/C,GAAG,QAAQ,OAAO,IADJ,QAAQ,CAEZ,CACd,CAAC,GACY,IACT,IACL,EACN,cAAK,SAAS,EAAC,QAAQ,GAAG,IACzB,CACJ,CAAC,CAAC,CAAC,IAAI,EAER,4BACG,OAAO,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC5C,cAAK,SAAS,EAAE,eAAe,QAAQ,EAAE,YACtC,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,GAC3B,CACP,CAAC,CAAC,CAAC,IAAI,GACP,EACF,aAAa,IACV,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,UAAU,CAAC,CAAC,CAAC,CACZ,cAAK,SAAS,EAAC,iDAAiD,GAAG,CACpE,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {\n ChevronDownIcon,\n ChevronUpIcon,\n ChevronsLeftIcon as ChevronDoubleLeftIcon,\n ChevronsRightIcon as ChevronDoubleRightIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from 'lucide-react';\nimport {\n Button,\n Input,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n Badge,\n cn,\n ScrollArea,\n ScrollBar,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n PaginationState,\n SortingState,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport {useEffect, useMemo, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n className?: string;\n /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n fontSize?: string;\n data?: ArrayLike<Data> | undefined;\n columns?: ColumnDef<Data, any>[] | undefined;\n pageCount?: number | undefined;\n numRows?: number | undefined;\n isFetching?: boolean;\n pagination?: PaginationState | undefined;\n sorting?: SortingState;\n footerActions?: React.ReactNode;\n onPaginationChange?: (pagination: PaginationState) => void;\n onSortingChange?: (sorting: SortingState) => void;\n};\n\n/**\n * Data table with pagination, sorting, and custom actions.\n * @param props\n * @returns\n */\nexport default function DataTablePaginated<Data extends object>({\n className,\n fontSize = 'text-base',\n data,\n columns,\n numRows,\n pagination,\n sorting,\n onPaginationChange,\n onSortingChange,\n footerActions,\n isFetching,\n}: DataTablePaginatedProps<Data>) {\n const defaultData = useMemo(() => [], []);\n const pageCount =\n pagination && numRows !== undefined\n ? Math.ceil(numRows / pagination.pageSize)\n : undefined;\n\n const table = useReactTable({\n data: (data ?? defaultData) as any[],\n columns: columns ?? [],\n pageCount: pageCount ?? 0,\n getSortedRowModel: getSortedRowModel(),\n onSortingChange: (update) => {\n if (onSortingChange && sorting && typeof update === 'function') {\n onSortingChange(update(sorting));\n }\n },\n onPaginationChange: (update) => {\n if (pagination && onPaginationChange && typeof update === 'function') {\n onPaginationChange(update(pagination));\n }\n },\n getCoreRowModel: getCoreRowModel(),\n manualPagination: true,\n state: {\n pagination,\n sorting,\n },\n });\n\n const [internalPageIndex, setInternalPageIndex] = useState(\n pagination?.pageIndex ?? 0,\n );\n useEffect(() => {\n setInternalPageIndex(pagination?.pageIndex ?? 0);\n }, [pagination?.pageIndex]);\n\n return (\n <div className={cn(`relative flex h-full w-full flex-col`, className)}>\n <div className=\"border-border flex-1 overflow-hidden border font-mono\">\n <ScrollArea className=\"h-full overflow-auto\">\n <Table disableWrapper>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <TableHead\n className={`bg-background sticky left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`}\n >\n {isFetching ? (\n <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n ) : null}\n </TableHead>\n {headerGroup.headers.map((header) => {\n const meta = header.column.columnDef\n .meta as ArrowColumnMeta;\n return (\n <TableHead\n key={header.id}\n colSpan={header.colSpan}\n className={cn(\n 'bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2',\n pagination ? 'cursor-pointer' : '',\n meta?.isNumeric ? 'text-right' : 'text-left',\n fontSize,\n )}\n onClick={header.column.getToggleSortingHandler()}\n >\n <div className=\"flex items-center gap-2\">\n {header.isPlaceholder ? null : (\n <div>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </div>\n )}\n {header.column.getIsSorted() ? (\n header.column.getIsSorted() === 'desc' ? (\n <ChevronDownIcon className=\"h-4 w-4\" />\n ) : (\n <ChevronUpIcon className=\"h-4 w-4\" />\n )\n ) : null}\n <div className=\"flex-1\" />\n <Badge\n variant=\"outline\"\n className={`max-w-[400px] truncate text-xs opacity-30`}\n >\n {String(meta?.type)}\n </Badge>\n </div>\n </TableHead>\n );\n })}\n <TableHead className=\"bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2\" />\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.map((row, i) => (\n <TableRow key={row.id} className=\"hover:bg-muted bg-background\">\n <TableCell\n className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`}\n >\n {pagination\n ? `${pagination.pageIndex * pagination.pageSize + i + 1}`\n : `${i + 1}`}\n </TableCell>\n {row.getVisibleCells().map((cell) => {\n const meta = cell.column.columnDef.meta as ArrowColumnMeta;\n return (\n <TableCell\n key={cell.id}\n className={cn(\n 'max-w-[500px] overflow-hidden truncate border-r px-7',\n fontSize,\n meta?.isNumeric ? 'text-right' : 'text-left',\n )}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </TableCell>\n );\n })}\n <TableCell className=\"border-r\">&nbsp;</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n <ScrollBar orientation=\"vertical\" className=\"z-50\" />\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n </div>\n {pagination || footerActions ? (\n <div className=\"bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2\">\n {pagination ? (\n <>\n <div className=\"flex flex-wrap items-center gap-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronDoubleLeftIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon className=\"h-4 w-4\" />\n </Button>\n <div className={`ml-1 flex items-center gap-1 ${fontSize}`}>\n <div>Page</div>\n <Input\n type=\"number\"\n min={1}\n max={table.getPageCount()}\n className=\"h-8 w-16\"\n value={internalPageIndex + 1}\n onChange={(e) => {\n const value = e.target.value;\n if (value) {\n const page = Math.max(\n 0,\n Math.min(table.getPageCount() - 1, Number(value) - 1),\n );\n setInternalPageIndex(page);\n }\n }}\n onBlur={() => {\n if (internalPageIndex !== pagination?.pageIndex) {\n table.setPageIndex(internalPageIndex);\n }\n }}\n />\n <div>{`of ${formatCount(table.getPageCount())}`}</div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronDoubleRightIcon className=\"h-4 w-4\" />\n </Button>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger className=\"h-8 w-[110px]\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {[10, 50, 100, 500, 1000].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {`${pageSize} rows`}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex-1\" />\n </>\n ) : null}\n\n <>\n {numRows !== undefined && isFinite(numRows) ? (\n <div className={`font-normal ${fontSize}`}>\n {`${formatCount(numRows)} rows`}\n </div>\n ) : null}\n </>\n {footerActions}\n </div>\n ) : null}\n\n {isFetching ? (\n <div className=\"bg-background/80 absolute inset-0 animate-pulse\" />\n ) : null}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChevronDownIcon,\n ChevronUpIcon,\n ChevronsLeftIcon as ChevronDoubleLeftIcon,\n ChevronsRightIcon as ChevronDoubleRightIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from 'lucide-react';\nimport {\n Button,\n Input,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n Badge,\n cn,\n ScrollArea,\n ScrollBar,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n PaginationState,\n SortingState,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport {useEffect, useMemo, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n className?: string;\n /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n fontSize?: string;\n data?: ArrayLike<Data> | undefined;\n columns?: ColumnDef<Data, any>[] | undefined;\n pageCount?: number | undefined;\n numRows?: number | undefined;\n isFetching?: boolean;\n pagination?: PaginationState | undefined;\n sorting?: SortingState;\n footerActions?: React.ReactNode;\n onPaginationChange?: (pagination: PaginationState) => void;\n onSortingChange?: (sorting: SortingState) => void;\n};\n\n/**\n * Data table with pagination, sorting, and custom actions.\n * @param props\n * @returns\n */\nexport default function DataTablePaginated<Data extends object>({\n className,\n fontSize = 'text-xs',\n data,\n columns,\n numRows,\n pagination,\n sorting,\n onPaginationChange,\n onSortingChange,\n footerActions,\n isFetching,\n}: DataTablePaginatedProps<Data>) {\n const defaultData = useMemo(() => [], []);\n const pageCount =\n pagination && numRows !== undefined\n ? Math.ceil(numRows / pagination.pageSize)\n : undefined;\n\n const table = useReactTable({\n data: (data ?? defaultData) as any[],\n columns: columns ?? [],\n pageCount: pageCount ?? 0,\n getSortedRowModel: getSortedRowModel(),\n onSortingChange: (update) => {\n if (onSortingChange && sorting && typeof update === 'function') {\n onSortingChange(update(sorting));\n }\n },\n onPaginationChange: (update) => {\n if (pagination && onPaginationChange && typeof update === 'function') {\n onPaginationChange(update(pagination));\n }\n },\n getCoreRowModel: getCoreRowModel(),\n manualPagination: true,\n state: {\n pagination,\n sorting,\n },\n });\n\n const [internalPageIndex, setInternalPageIndex] = useState(\n pagination?.pageIndex ?? 0,\n );\n useEffect(() => {\n setInternalPageIndex(pagination?.pageIndex ?? 0);\n }, [pagination?.pageIndex]);\n\n return (\n <div className={cn(`relative flex h-full w-full flex-col`, className)}>\n <div className=\"border-border flex-1 overflow-hidden border font-mono\">\n <ScrollArea className=\"h-full overflow-auto\">\n <Table disableWrapper>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <TableHead\n className={`bg-background sticky left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`}\n >\n {isFetching ? (\n <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n ) : null}\n </TableHead>\n {headerGroup.headers.map((header) => {\n const meta = header.column.columnDef\n .meta as ArrowColumnMeta;\n return (\n <TableHead\n key={header.id}\n colSpan={header.colSpan}\n className={cn(\n 'bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2',\n pagination ? 'cursor-pointer' : '',\n meta?.isNumeric ? 'text-right' : 'text-left',\n fontSize,\n )}\n onClick={header.column.getToggleSortingHandler()}\n >\n <div className=\"flex items-center gap-2\">\n {header.isPlaceholder ? null : (\n <div>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </div>\n )}\n {header.column.getIsSorted() ? (\n header.column.getIsSorted() === 'desc' ? (\n <ChevronDownIcon className=\"h-4 w-4\" />\n ) : (\n <ChevronUpIcon className=\"h-4 w-4\" />\n )\n ) : null}\n <div className=\"flex-1\" />\n <Badge\n variant=\"outline\"\n className={`max-w-[400px] truncate text-xs opacity-30`}\n >\n {String(meta?.type)}\n </Badge>\n </div>\n </TableHead>\n );\n })}\n <TableHead className=\"bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2\" />\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.map((row, i) => (\n <TableRow key={row.id} className=\"hover:bg-muted bg-background\">\n <TableCell\n className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`}\n >\n {pagination\n ? `${pagination.pageIndex * pagination.pageSize + i + 1}`\n : `${i + 1}`}\n </TableCell>\n {row.getVisibleCells().map((cell) => {\n const meta = cell.column.columnDef.meta as ArrowColumnMeta;\n return (\n <TableCell\n key={cell.id}\n className={cn(\n 'max-w-[500px] overflow-hidden truncate border-r px-7',\n fontSize,\n meta?.isNumeric ? 'text-right' : 'text-left',\n )}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </TableCell>\n );\n })}\n <TableCell className=\"border-r\">&nbsp;</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n <ScrollBar orientation=\"vertical\" className=\"z-50\" />\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n </div>\n {pagination || footerActions ? (\n <div className=\"bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2\">\n {pagination ? (\n <>\n <div className=\"flex flex-wrap items-center gap-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronDoubleLeftIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon className=\"h-4 w-4\" />\n </Button>\n <div className={`ml-1 flex items-center gap-1 ${fontSize}`}>\n <div>Page</div>\n <Input\n type=\"number\"\n min={1}\n max={table.getPageCount()}\n className=\"h-8 w-16\"\n value={internalPageIndex + 1}\n onChange={(e) => {\n const value = e.target.value;\n if (value) {\n const page = Math.max(\n 0,\n Math.min(table.getPageCount() - 1, Number(value) - 1),\n );\n setInternalPageIndex(page);\n }\n }}\n onBlur={() => {\n if (internalPageIndex !== pagination?.pageIndex) {\n table.setPageIndex(internalPageIndex);\n }\n }}\n />\n <div>{`of ${formatCount(table.getPageCount())}`}</div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronDoubleRightIcon className=\"h-4 w-4\" />\n </Button>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger className=\"h-8 w-[110px]\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {[10, 50, 100, 500, 1000].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {`${pageSize} rows`}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex-1\" />\n </>\n ) : null}\n\n <>\n {numRows !== undefined && isFinite(numRows) ? (\n <div className={`font-normal ${fontSize}`}>\n {`${formatCount(numRows)} rows`}\n </div>\n ) : null}\n </>\n {footerActions}\n </div>\n ) : null}\n\n {isFetching ? (\n <div className=\"bg-background/80 absolute inset-0 animate-pulse\" />\n ) : null}\n </div>\n );\n}\n"]}
@@ -5,7 +5,7 @@ import DataTablePaginated from './DataTablePaginated';
5
5
  import { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
6
6
  import useArrowDataTable from './useArrowDataTable';
7
7
  import { makePagedQuery } from './utils';
8
- const QueryDataTable = ({ className, fontSize = 'text-base', query, renderActions = (query) => _jsx(QueryDataTableActionsMenu, { query: query }), }) => {
8
+ const QueryDataTable = ({ className, fontSize = 'text-xs', query, renderActions = (query) => _jsx(QueryDataTableActionsMenu, { query: query }), }) => {
9
9
  const [sorting, setSorting] = useState([]);
10
10
  const [pagination, setPagination] = useState({
11
11
  pageIndex: 0,
@@ -1 +1 @@
1
- {"version":3,"file":"QueryDataTable.js","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAE,MAAM,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,kBAEN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAWvC,MAAM,cAAc,GAA4B,CAAC,EAC/C,SAAS,EACT,QAAQ,GAAG,WAAW,EACtB,KAAK,EACL,aAAa,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,yBAAyB,IAAC,KAAK,EAAE,KAAK,GAAI,GACvE,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB;QAC5D,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,GAAG;KACd,CAAC,CAAC;IAEH,gGAAgG;IAChG,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC,CAAC;IAChD,MAAM,gBAAgB,GAAG,MAAM,CAAkB;QAC/C,KAAK,EAAE,uCAAuC,cAAc,GAAG;KAChE,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAEvE,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,iCAAiC,YAC9C,cAAK,SAAS,EAAC,oCAAoC,YAChD,WAAW,CAAC,KAAK,EAAE,OAAO,IAAI,eAAe,GAC1C,GACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI;QACnC,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;QAClD,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,KAAC,kBAAkB,OACb,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,UAAU,EAC3B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,GACnE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {sanitizeQuery, useSql} from '@sqlrooms/duckdb';\nimport {PaginationState, SortingState} from '@tanstack/table-core';\nimport {FC, useMemo, useState} from 'react';\nimport DataTablePaginated, {\n DataTablePaginatedProps,\n} from './DataTablePaginated';\nimport {QueryDataTableActionsMenu} from './QueryDataTableActionsMenu';\nimport useArrowDataTable from './useArrowDataTable';\nimport {makePagedQuery} from './utils';\n\nexport type QueryDataTableProps = {\n className?: string;\n /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n fontSize?: DataTablePaginatedProps<any>['fontSize'];\n query: string;\n queryKeyComponents?: unknown[];\n renderActions?: (query: string) => React.ReactNode;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n className,\n fontSize = 'text-base',\n query,\n renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n}) => {\n const [sorting, setSorting] = useState<SortingState>([]);\n const [pagination, setPagination] = useState<PaginationState>({\n pageIndex: 0,\n pageSize: 100,\n });\n\n // Sanitize the query generated by LLM to remove trailing semicolons, comments, and extra spaces\n const sanitizedQuery = useMemo(() => sanitizeQuery(query), [query]);\n const pagedQuery = makePagedQuery(sanitizedQuery, sorting, pagination);\n const queryResult = useSql({query: pagedQuery});\n const countQueryResult = useSql<{count: number}>({\n query: `SELECT COUNT(*)::int AS count FROM (${sanitizedQuery})`,\n });\n const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable);\n\n if (queryResult.error) {\n return (\n <div className=\"h-full w-full overflow-auto p-5\">\n <pre className=\"text-xs leading-tight text-red-500\">\n {queryResult.error?.message ?? 'Unknown error'}\n </pre>\n </div>\n );\n }\n\n const numRows = countQueryResult.data\n ? (countQueryResult.data.toArray()[0]?.count ?? 0)\n : undefined;\n\n return (\n <DataTablePaginated\n {...arrowTableData}\n className={className}\n fontSize={fontSize}\n numRows={numRows}\n isFetching={queryResult.isLoading}\n pagination={pagination}\n onPaginationChange={setPagination}\n sorting={sorting}\n onSortingChange={setSorting}\n footerActions={renderActions ? renderActions(sanitizedQuery) : null}\n />\n );\n};\n\nexport default QueryDataTable;\n"]}
1
+ {"version":3,"file":"QueryDataTable.js","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAE,MAAM,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,kBAEN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAWvC,MAAM,cAAc,GAA4B,CAAC,EAC/C,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,KAAK,EACL,aAAa,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,yBAAyB,IAAC,KAAK,EAAE,KAAK,GAAI,GACvE,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB;QAC5D,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,GAAG;KACd,CAAC,CAAC;IAEH,gGAAgG;IAChG,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC,CAAC;IAChD,MAAM,gBAAgB,GAAG,MAAM,CAAkB;QAC/C,KAAK,EAAE,uCAAuC,cAAc,GAAG;KAChE,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAEvE,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,iCAAiC,YAC9C,cAAK,SAAS,EAAC,oCAAoC,YAChD,WAAW,CAAC,KAAK,EAAE,OAAO,IAAI,eAAe,GAC1C,GACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI;QACnC,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;QAClD,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,KAAC,kBAAkB,OACb,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,UAAU,EAC3B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,GACnE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {sanitizeQuery, useSql} from '@sqlrooms/duckdb';\nimport {PaginationState, SortingState} from '@tanstack/table-core';\nimport {FC, useMemo, useState} from 'react';\nimport DataTablePaginated, {\n DataTablePaginatedProps,\n} from './DataTablePaginated';\nimport {QueryDataTableActionsMenu} from './QueryDataTableActionsMenu';\nimport useArrowDataTable from './useArrowDataTable';\nimport {makePagedQuery} from './utils';\n\nexport type QueryDataTableProps = {\n className?: string;\n /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n fontSize?: DataTablePaginatedProps<any>['fontSize'];\n query: string;\n queryKeyComponents?: unknown[];\n renderActions?: (query: string) => React.ReactNode;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n className,\n fontSize = 'text-xs',\n query,\n renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n}) => {\n const [sorting, setSorting] = useState<SortingState>([]);\n const [pagination, setPagination] = useState<PaginationState>({\n pageIndex: 0,\n pageSize: 100,\n });\n\n // Sanitize the query generated by LLM to remove trailing semicolons, comments, and extra spaces\n const sanitizedQuery = useMemo(() => sanitizeQuery(query), [query]);\n const pagedQuery = makePagedQuery(sanitizedQuery, sorting, pagination);\n const queryResult = useSql({query: pagedQuery});\n const countQueryResult = useSql<{count: number}>({\n query: `SELECT COUNT(*)::int AS count FROM (${sanitizedQuery})`,\n });\n const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable);\n\n if (queryResult.error) {\n return (\n <div className=\"h-full w-full overflow-auto p-5\">\n <pre className=\"text-xs leading-tight text-red-500\">\n {queryResult.error?.message ?? 'Unknown error'}\n </pre>\n </div>\n );\n }\n\n const numRows = countQueryResult.data\n ? (countQueryResult.data.toArray()[0]?.count ?? 0)\n : undefined;\n\n return (\n <DataTablePaginated\n {...arrowTableData}\n className={className}\n fontSize={fontSize}\n numRows={numRows}\n isFetching={queryResult.isLoading}\n pagination={pagination}\n onPaginationChange={setPagination}\n sorting={sorting}\n onSortingChange={setSorting}\n footerActions={renderActions ? renderActions(sanitizedQuery) : null}\n />\n );\n};\n\nexport default QueryDataTable;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sqlrooms/data-table",
3
- "version": "0.24.4",
3
+ "version": "0.24.6",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "module": "dist/index.js",
@@ -18,9 +18,9 @@
18
18
  "access": "public"
19
19
  },
20
20
  "dependencies": {
21
- "@sqlrooms/duckdb": "0.24.4",
22
- "@sqlrooms/ui": "0.24.4",
23
- "@sqlrooms/utils": "0.24.4",
21
+ "@sqlrooms/duckdb": "0.24.6",
22
+ "@sqlrooms/ui": "0.24.6",
23
+ "@sqlrooms/utils": "0.24.6",
24
24
  "@tanstack/react-table": "^8.21.3",
25
25
  "@tanstack/table-core": "^8.21.3",
26
26
  "lucide-react": "^0.503.0",
@@ -38,5 +38,5 @@
38
38
  "typecheck": "tsc --noEmit",
39
39
  "typedoc": "typedoc"
40
40
  },
41
- "gitHead": "fa0f592f6816218da76e1fbb74c5b6b4b173404f"
41
+ "gitHead": "01a7755107ec723941119e24683b89a907817fc4"
42
42
  }