@sqlrooms/data-table 0.27.0-rc.5 → 0.28.0-rc.0

package/dist/ColumnTypeBadge.js

@@ -3,7 +3,7 @@ import { cn } from '@sqlrooms/ui';
 /**∏
  * A badge that displays the type of a database table column.
  */
-export const ColumnTypeBadge = ({ className, columnType, typeCategory }) => (_jsx("div", { title: String(columnType), className: cn('flex h-5 items-center justify-center', 'py-0.25 w-[55px] flex-shrink-0 overflow-hidden text-ellipsis rounded-sm px-1 text-center text-[9px]', 'cursor-default whitespace-nowrap lowercase', {
+export const ColumnTypeBadge = ({ className, columnType, typeCategory }) => (_jsx("div", { title: String(columnType), className: cn('flex h-5 items-center justify-center', 'w-[55px] shrink-0 overflow-hidden rounded-sm px-1 py-0.25 text-center text-[9px] text-ellipsis', 'cursor-default whitespace-nowrap lowercase', {
         'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400': !typeCategory,
         'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400': typeCategory === 'string',
         'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400': typeCategory === 'number',

package/dist/ColumnTypeBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnTypeBadge.js","sourceRoot":"","sources":["../src/ColumnTypeBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAIvB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAC,EAAE,EAAE,CAAC,CAC9C,cACE,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,EACzB,SAAS,EAAE,EAAE,CACX,sCAAsC,EACtC,qGAAqG,EACrG,4CAA4C,EAC5C;QACE,+DAA+D,EAC7D,CAAC,YAAY;QACf,+DAA+D,EAC7D,YAAY,KAAK,QAAQ;QAC3B,mEAAmE,EACjE,YAAY,KAAK,QAAQ;QAC3B,uEAAuE,EACrE,YAAY,KAAK,UAAU;QAC7B,2DAA2D,EACzD,YAAY,KAAK,SAAS;QAC5B,uEAAuE,EACrE,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,UAAU;QAC1D,uEAAuE,EACrE,YAAY,KAAK,MAAM,IAAI,YAAY,KAAK,QAAQ;KACvD,EACD,SAAS,CACV,YAEA,MAAM,CAAC,UAAU,CAAC,GACf,CACP,CAAC","sourcesContent":["import {ColumnTypeCategory} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\n\n/**∏\n * A badge that displays the type of a database table column.\n */\nexport const ColumnTypeBadge: FC<{\n  className?: string;\n  columnType: unknown;\n  typeCategory?: ColumnTypeCategory;\n}> = ({className, columnType, typeCategory}) => (\n  <div\n    title={String(columnType)}\n    className={cn(\n      'flex h-5 items-center justify-center',\n      'py-0.25 w-[55px] flex-shrink-0 overflow-hidden text-ellipsis rounded-sm px-1 text-center text-[9px]',\n      'cursor-default whitespace-nowrap lowercase',\n      {\n        'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400':\n          !typeCategory,\n        'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400':\n          typeCategory === 'string',\n        'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400':\n          typeCategory === 'number',\n        'bg-yellow-100 text-yellow-500 dark:bg-yellow-900 dark:text-yellow-400':\n          typeCategory === 'datetime',\n        'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400':\n          typeCategory === 'boolean',\n        'bg-orange-100 text-orange-400 dark:bg-orange-900 dark:text-orange-400':\n          typeCategory === 'binary' || typeCategory === 'geometry',\n        'bg-purple-100 text-purple-500 dark:bg-purple-900 dark:text-purple-400':\n          typeCategory === 'json' || typeCategory === 'struct',\n      },\n      className,\n    )}\n  >\n    {String(columnType)}\n  </div>\n);\n"]}
+{"version":3,"file":"ColumnTypeBadge.js","sourceRoot":"","sources":["../src/ColumnTypeBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAIvB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAC,EAAE,EAAE,CAAC,CAC9C,cACE,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,EACzB,SAAS,EAAE,EAAE,CACX,sCAAsC,EACtC,gGAAgG,EAChG,4CAA4C,EAC5C;QACE,+DAA+D,EAC7D,CAAC,YAAY;QACf,+DAA+D,EAC7D,YAAY,KAAK,QAAQ;QAC3B,mEAAmE,EACjE,YAAY,KAAK,QAAQ;QAC3B,uEAAuE,EACrE,YAAY,KAAK,UAAU;QAC7B,2DAA2D,EACzD,YAAY,KAAK,SAAS;QAC5B,uEAAuE,EACrE,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,UAAU;QAC1D,uEAAuE,EACrE,YAAY,KAAK,MAAM,IAAI,YAAY,KAAK,QAAQ;KACvD,EACD,SAAS,CACV,YAEA,MAAM,CAAC,UAAU,CAAC,GACf,CACP,CAAC","sourcesContent":["import {ColumnTypeCategory} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\n\n/**∏\n * A badge that displays the type of a database table column.\n */\nexport const ColumnTypeBadge: FC<{\n  className?: string;\n  columnType: unknown;\n  typeCategory?: ColumnTypeCategory;\n}> = ({className, columnType, typeCategory}) => (\n  <div\n    title={String(columnType)}\n    className={cn(\n      'flex h-5 items-center justify-center',\n      'w-[55px] shrink-0 overflow-hidden rounded-sm px-1 py-0.25 text-center text-[9px] text-ellipsis',\n      'cursor-default whitespace-nowrap lowercase',\n      {\n        'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400':\n          !typeCategory,\n        'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400':\n          typeCategory === 'string',\n        'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400':\n          typeCategory === 'number',\n        'bg-yellow-100 text-yellow-500 dark:bg-yellow-900 dark:text-yellow-400':\n          typeCategory === 'datetime',\n        'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400':\n          typeCategory === 'boolean',\n        'bg-orange-100 text-orange-400 dark:bg-orange-900 dark:text-orange-400':\n          typeCategory === 'binary' || typeCategory === 'geometry',\n        'bg-purple-100 text-purple-500 dark:bg-purple-900 dark:text-purple-400':\n          typeCategory === 'json' || typeCategory === 'struct',\n      },\n      className,\n    )}\n  >\n    {String(columnType)}\n  </div>\n);\n"]}

package/dist/DataTableArrowPaginated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableArrowPaginated.d.ts","sourceRoot":"","sources":["../src/DataTableArrowPaginated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAA2B,EACzB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAC9B,OAA0B,EAAC,4BAA4B,EAAC,MAAM,qBAAqB,CAAC;AAGpF,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAqCpE,CAAC"}
+{"version":3,"file":"DataTableArrowPaginated.d.ts","sourceRoot":"","sources":["../src/DataTableArrowPaginated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAA2B,EACzB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAC9B,OAA0B,EACxB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAG7B,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAqCpE,CAAC"}

package/dist/DataTableArrowPaginated.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableArrowPaginated.js","sourceRoot":"","sources":["../src/DataTableArrowPaginated.tsx"],"names":[],"mappings":";AACA,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,kBAEN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,iBAAiD,MAAM,qBAAqB,CAAC;AAapF,MAAM,CAAC,MAAM,uBAAuB,GAAqC,CAAC,EACxE,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,GAAG,EACd,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ;IAC1C,mEAAmE;IACnE,KAAK,EAAE,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,QAAQ;QACzC,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,CAC7B,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YAAE,OAAO,KAAK,CAAC;QACxC,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC9D,MAAM,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC,QAAQ,CAAC;QAClD,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAExB,MAAM,GAAG,GAAG,iBAAiB,CAAC,QAAQ,EAAE,EAAC,WAAW,EAAC,CAAC,CAAC;IACvD,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,cAAK,SAAS,EAAC,aAAa,wBAAc,CAAC;IACpD,CAAC;IACD,OAAO,CACL,KAAC,kBAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,OAAO,EAAE,GAAG,CAAC,OAAO,EACpB,OAAO,EAAE,KAAK,EAAE,OAAO,EACvB,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as arrow from 'apache-arrow';\nimport {FC, useMemo, useState} from 'react';\nimport DataTablePaginated, {\n  DataTablePaginatedProps,\n} from './DataTablePaginated';\nimport useArrowDataTable, {ArrowDataTableValueFormatter} from './useArrowDataTable';\nimport {PaginationState} from '@tanstack/react-table';\n\nexport type DataTableArrowPaginatedProps = {\n  className?: string;\n  table: arrow.Table | undefined;\n  fontSize?: DataTablePaginatedProps<any>['fontSize'];\n  footerActions?: DataTablePaginatedProps<any>['footerActions'];\n  pageSize?: number;\n  /** Optional custom value formatter for binary/geometry data */\n  formatValue?: ArrowDataTableValueFormatter;\n};\n\nexport const DataTableArrowPaginated: FC<DataTableArrowPaginatedProps> = ({\n  className,\n  table,\n  fontSize,\n  footerActions,\n  pageSize = 100,\n  formatValue,\n}) => {\n  const [pagination, setPagination] = useState<PaginationState | undefined>(\n    // If the table has less than pageSize rows, don't show pagination.\n    table?.numRows && table.numRows <= pageSize\n      ? undefined\n      : {pageIndex: 0, pageSize},\n  );\n  const pageData = useMemo(() => {\n    if (!table || !pagination) return table;\n    const startIndex = pagination.pageIndex * pagination.pageSize;\n    const endIndex = startIndex + pagination.pageSize;\n    return table.slice(startIndex, endIndex);\n  }, [table, pagination]);\n\n  const adt = useArrowDataTable(pageData, {formatValue});\n  if (!adt) {\n    return <div className=\"p-4 text-xs\">No data</div>;\n  }\n  return (\n    <DataTablePaginated\n      className={className}\n      data={adt.data}\n      columns={adt.columns}\n      numRows={table?.numRows}\n      pagination={pagination}\n      onPaginationChange={setPagination}\n      fontSize={fontSize}\n      footerActions={footerActions}\n    />\n  );\n};\n"]}
+{"version":3,"file":"DataTableArrowPaginated.js","sourceRoot":"","sources":["../src/DataTableArrowPaginated.tsx"],"names":[],"mappings":";AACA,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,kBAEN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,iBAEN,MAAM,qBAAqB,CAAC;AAa7B,MAAM,CAAC,MAAM,uBAAuB,GAAqC,CAAC,EACxE,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,GAAG,EACd,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ;IAC1C,mEAAmE;IACnE,KAAK,EAAE,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,QAAQ;QACzC,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,CAC7B,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YAAE,OAAO,KAAK,CAAC;QACxC,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC9D,MAAM,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC,QAAQ,CAAC;QAClD,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAExB,MAAM,GAAG,GAAG,iBAAiB,CAAC,QAAQ,EAAE,EAAC,WAAW,EAAC,CAAC,CAAC;IACvD,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,cAAK,SAAS,EAAC,aAAa,wBAAc,CAAC;IACpD,CAAC;IACD,OAAO,CACL,KAAC,kBAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,OAAO,EAAE,GAAG,CAAC,OAAO,EACpB,OAAO,EAAE,KAAK,EAAE,OAAO,EACvB,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as arrow from 'apache-arrow';\nimport {FC, useMemo, useState} from 'react';\nimport DataTablePaginated, {\n  DataTablePaginatedProps,\n} from './DataTablePaginated';\nimport useArrowDataTable, {\n  ArrowDataTableValueFormatter,\n} from './useArrowDataTable';\nimport {PaginationState} from '@tanstack/react-table';\n\nexport type DataTableArrowPaginatedProps = {\n  className?: string;\n  table: arrow.Table | undefined;\n  fontSize?: DataTablePaginatedProps<any>['fontSize'];\n  footerActions?: DataTablePaginatedProps<any>['footerActions'];\n  pageSize?: number;\n  /** Optional custom value formatter for binary/geometry data */\n  formatValue?: ArrowDataTableValueFormatter;\n};\n\nexport const DataTableArrowPaginated: FC<DataTableArrowPaginatedProps> = ({\n  className,\n  table,\n  fontSize,\n  footerActions,\n  pageSize = 100,\n  formatValue,\n}) => {\n  const [pagination, setPagination] = useState<PaginationState | undefined>(\n    // If the table has less than pageSize rows, don't show pagination.\n    table?.numRows && table.numRows <= pageSize\n      ? undefined\n      : {pageIndex: 0, pageSize},\n  );\n  const pageData = useMemo(() => {\n    if (!table || !pagination) return table;\n    const startIndex = pagination.pageIndex * pagination.pageSize;\n    const endIndex = startIndex + pagination.pageSize;\n    return table.slice(startIndex, endIndex);\n  }, [table, pagination]);\n\n  const adt = useArrowDataTable(pageData, {formatValue});\n  if (!adt) {\n    return <div className=\"p-4 text-xs\">No data</div>;\n  }\n  return (\n    <DataTablePaginated\n      className={className}\n      data={adt.data}\n      columns={adt.columns}\n      numRows={table?.numRows}\n      pagination={pagination}\n      onPaginationChange={setPagination}\n      fontSize={fontSize}\n      footerActions={footerActions}\n    />\n  );\n};\n"]}

package/dist/DataTableModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableModal.d.ts","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,wBAAwB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAC,4BAA4B,EAAC,MAAM,qBAAqB,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACjE,+DAA+D;IAC/D,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,GAAG,CACA;IACE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,GACD;IACE,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACJ,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqC3C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DataTableModal.d.ts","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,wBAAwB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAC,4BAA4B,EAAC,MAAM,qBAAqB,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACjE,+DAA+D;IAC/D,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,GAAG,CACA;IACE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,GACD;IACE,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACJ,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAwC3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/DataTableModal.js.map

@@ -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,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AA8ClE,MAAM,cAAc,GAA4B,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,EAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC1D,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,EACnC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,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,CACpB,4BACG,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACjC,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CACjE,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC9C,KAAC,uBAAuB,IAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,WAAW,EAAE,WAAW,GAAI,CAC/E,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,aAAa,wBAAc,CAC3C,GACA,CACJ,GACG,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';\nimport * as arrow from 'apache-arrow';\nimport {DataTableArrowPaginated} from './DataTableArrowPaginated';\nimport {ArrowDataTableValueFormatter} from './useArrowDataTable';\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 */\nexport type DataTableModalProps = {\n  className?: string;\n  title: string | undefined;\n  tableModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n  /** Optional custom value formatter for binary/geometry data */\n  formatValue?: ArrowDataTableValueFormatter;\n} & (\n  | {\n      query: string | undefined;\n      arrowTable?: never;\n    }\n  | {\n      arrowTable: arrow.Table | undefined;\n      query?: never;\n    }\n);\n\nconst DataTableModal: FC<DataTableModalProps> = (props) => {\n  const {className, title, tableModal, formatValue} = props;\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        onClick={(e) => e.stopPropagation()}\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 && (\n            <>\n              {'query' in props && props.query ? (\n                <QueryDataTable query={props.query} formatValue={formatValue} />\n              ) : 'arrowTable' in props && props.arrowTable ? (\n                <DataTableArrowPaginated table={props.arrowTable} formatValue={formatValue} />\n              ) : (\n                <div className=\"p-4 text-xs\">No data</div>\n              )}\n            </>\n          )}\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"]}
+{"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,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AA8ClE,MAAM,cAAc,GAA4B,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,EAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC1D,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,EACnC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,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,CACpB,4BACG,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACjC,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CACjE,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC9C,KAAC,uBAAuB,IACtB,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,aAAa,wBAAc,CAC3C,GACA,CACJ,GACG,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';\nimport * as arrow from 'apache-arrow';\nimport {DataTableArrowPaginated} from './DataTableArrowPaginated';\nimport {ArrowDataTableValueFormatter} from './useArrowDataTable';\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 */\nexport type DataTableModalProps = {\n  className?: string;\n  title: string | undefined;\n  tableModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n  /** Optional custom value formatter for binary/geometry data */\n  formatValue?: ArrowDataTableValueFormatter;\n} & (\n  | {\n      query: string | undefined;\n      arrowTable?: never;\n    }\n  | {\n      arrowTable: arrow.Table | undefined;\n      query?: never;\n    }\n);\n\nconst DataTableModal: FC<DataTableModalProps> = (props) => {\n  const {className, title, tableModal, formatValue} = props;\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        onClick={(e) => e.stopPropagation()}\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 && (\n            <>\n              {'query' in props && props.query ? (\n                <QueryDataTable query={props.query} formatValue={formatValue} />\n              ) : 'arrowTable' in props && props.arrowTable ? (\n                <DataTableArrowPaginated\n                  table={props.arrowTable}\n                  formatValue={formatValue}\n                />\n              ) : (\n                <div className=\"p-4 text-xs\">No data</div>\n              )}\n            </>\n          )}\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"]}

package/dist/DataTablePaginated.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, PaginationState, SortingState, Row } from '@tanstack/react-table';
+import { ColumnDef, PaginationState, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
 export type DataTablePaginatedProps<Data extends object> = {
     className?: string;
     /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */
@@ -27,11 +27,21 @@ export type DataTablePaginatedProps<Data extends object> = {
         row: Row<Data>;
         event: React.MouseEvent<HTMLTableRowElement>;
     }) => void;
+    /**
+     * Enables row selection with checkboxes. When true, a checkbox column is added.
+     */
+    enableRowSelection?: boolean;
+    /**
+     * Controlled row selection state. Keys are row indices, values are selection status.
+     */
+    rowSelection?: RowSelectionState;
+    /**
+     * Called when row selection changes.
+     */
+    onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
 };
 /**
- * Data table with pagination, sorting, and custom actions.
- * @param props
- * @returns
+ * Data table with pagination, sorting, row selection, and custom actions.
  */
-export default function DataTablePaginated<Data extends object>({ className, fontSize, data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, onRowClick, onRowDoubleClick, }: DataTablePaginatedProps<Data>): import("react/jsx-runtime").JSX.Element;
+export default function DataTablePaginated<Data extends object>({ className, fontSize, data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, onRowClick, onRowDoubleClick, enableRowSelection, rowSelection, onRowSelectionChange, }: DataTablePaginatedProps<Data>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTablePaginated.d.ts.map

package/dist/DataTablePaginated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA6BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EACZ,GAAG,EAKJ,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;IAClD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAClB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QACxB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;CACZ,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,EACV,UAAU,EACV,gBAAgB,GACjB,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CAwP/B"}
+{"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,SAAS,EAIT,eAAe,EACf,GAAG,EACH,iBAAiB,EACjB,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAY/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;IAClD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAClB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QACxB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF;;GAEG;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,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CA2T/B"}

package/dist/DataTablePaginated.js

@@ -1,16 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronDownIcon, ChevronUpIcon, ChevronsLeftIcon as ChevronDoubleLeftIcon, ChevronsRightIcon as ChevronDoubleRightIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react';
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, cn, ScrollArea, ScrollBar, resolveFontSizeClass, } from '@sqlrooms/ui';
+import { Badge, Button, Checkbox, cn, Input, resolveFontSizeClass, ScrollArea, ScrollBar, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@sqlrooms/ui';
 import { formatCount } from '@sqlrooms/utils';
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
-import { useEffect, useMemo, useState } from 'react';
+import { ChevronsLeftIcon as ChevronDoubleLeftIcon, ChevronsRightIcon as ChevronDoubleRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 /**
- * Data table with pagination, sorting, and custom actions.
- * @param props
- * @returns
+ * Data table with pagination, sorting, row selection, and custom actions.
  */
-export default function DataTablePaginated({ className, fontSize = 'text-xs', data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, onRowClick, onRowDoubleClick, }) {
+export default function DataTablePaginated({ className, fontSize = 'text-xs', data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, onRowClick, onRowDoubleClick, enableRowSelection, rowSelection, onRowSelectionChange, }) {
     const defaultData = useMemo(() => [], []);
+    const [internalRowSelection, setInternalRowSelection] = useState({});
+    // Use controlled or uncontrolled row selection
+    const currentRowSelection = rowSelection ?? internalRowSelection;
+    const currentRowSelectionRef = useRef(currentRowSelection);
+    useEffect(() => {
+        currentRowSelectionRef.current = currentRowSelection;
+    }, [currentRowSelection]);
+    const handleRowSelectionChange = useCallback((updaterOrValue) => {
+        if (onRowSelectionChange) {
+            const newValue = typeof updaterOrValue === 'function'
+                ? updaterOrValue(currentRowSelectionRef.current)
+                : updaterOrValue;
+            onRowSelectionChange(newValue);
+        }
+        else {
+            setInternalRowSelection(updaterOrValue);
+        }
+    }, [onRowSelectionChange, setInternalRowSelection]);
     const fontSizeClass = resolveFontSizeClass(fontSize);
     const pageCount = pagination && numRows !== undefined
         ? Math.ceil(numRows / pagination.pageSize)
@@ -20,6 +36,10 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
         columns: columns ?? [],
         pageCount: pageCount ?? 0,
         getSortedRowModel: getSortedRowModel(),
+        enableRowSelection: enableRowSelection ?? false,
+        onRowSelectionChange: (update) => {
+            handleRowSelectionChange(update);
+        },
         onSortingChange: (update) => {
             if (onSortingChange && sorting && typeof update === 'function') {
                 onSortingChange(update(sorting));
@@ -35,25 +55,29 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
         state: {
             pagination,
             sorting,
+            rowSelection: currentRowSelection,
         },
     });
     const [internalPageIndex, setInternalPageIndex] = useState(pagination?.pageIndex ?? 0);
     useEffect(() => {
         setInternalPageIndex(pagination?.pageIndex ?? 0);
     }, [pagination?.pageIndex]);
-    return (_jsxs("div", { className: cn(`relative flex h-full w-full flex-col`, className), children: [_jsx("div", { className: "border-border flex-1 overflow-hidden border font-mono", children: _jsxs(ScrollArea, { className: "h-full overflow-auto", children: [_jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `bg-background sticky top-[-1px] left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : null }), headerGroup.headers.map((header) => {
+    return (_jsxs("div", { className: cn(`relative flex h-full w-full flex-col`, className), children: [_jsx("div", { className: "border-border flex-1 overflow-hidden border font-mono", children: _jsxs(ScrollArea, { className: "h-full overflow-auto", children: [_jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `bg-background sticky -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : enableRowSelection ? (_jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() ||
+                                                        (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all" })) : null }), headerGroup.headers.map((header) => {
                                                 const meta = header.column.columnDef
                                                     .meta;
-                                                return (_jsx(TableHead, { colSpan: header.colSpan, className: cn('bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto border-r py-2 whitespace-nowrap', pagination ? 'cursor-pointer' : '', meta?.isNumeric ? 'text-right' : 'text-left', fontSizeClass), onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex items-center gap-2", children: [header.isPlaceholder ? null : (_jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getIsSorted() ? (header.column.getIsSorted() === 'desc' ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronUpIcon, { className: "h-4 w-4" }))) : null, _jsx("div", { className: "flex-1" }), _jsx(Badge, { variant: "outline", className: `max-w-[400px] truncate text-xs opacity-30`, children: String(meta?.type) })] }) }, header.id));
-                                            }), _jsx(TableHead, { className: "bg-background sticky top-0 w-full border-t border-r py-2 whitespace-nowrap" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted bg-background", onClick: (event) => {
-                                            event.preventDefault();
-                                            onRowClick?.({ row: row, event });
-                                        }, onDoubleClick: (event) => {
-                                            event.preventDefault();
-                                            onRowDoubleClick?.({ row: row, event });
-                                        }, children: [_jsx(TableCell, { className: `bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`, children: pagination
-                                                    ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
-                                                    : `${i + 1}` }), row.getVisibleCells().map((cell) => {
+                                                return (_jsx(TableHead, { colSpan: header.colSpan, className: cn('bg-background hover:bg-muted sticky -top-px z-10 w-auto border-r py-2 whitespace-nowrap', pagination ? 'cursor-pointer' : '', meta?.isNumeric ? 'text-right' : 'text-left', fontSizeClass), onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex items-center gap-2", children: [header.isPlaceholder ? null : (_jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getIsSorted() ? (header.column.getIsSorted() === 'desc' ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronUpIcon, { className: "h-4 w-4" }))) : null, _jsx("div", { className: "flex-1" }), _jsx(Badge, { variant: "outline", className: `max-w-[400px] truncate text-xs opacity-30`, children: String(meta?.type) })] }) }, header.id));
+                                            }), _jsx(TableHead, { className: "bg-background sticky -top-px w-full border-t border-r py-2 whitespace-nowrap" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { "data-state": row.getIsSelected() ? 'selected' : undefined, className: cn('hover:bg-muted bg-background', row.getIsSelected() && 'bg-muted'), onClick: onRowClick
+                                            ? (event) => {
+                                                event.preventDefault();
+                                                onRowClick({ row: row, event });
+                                            }
+                                            : undefined, onDoubleClick: onRowDoubleClick
+                                            ? (event) => {
+                                                event.preventDefault();
+                                                onRowDoubleClick({ row: row, event });
+                                            }
+                                            : undefined, children: [_jsx(TableCell, { className: `bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`, children: enableRowSelection ? (_jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), onClick: (event) => event.stopPropagation(), "aria-label": "Select row" })) : pagination ? (`${pagination.pageIndex * pagination.pageSize + i + 1}`) : (`${i + 1}`) }), row.getVisibleCells().map((cell) => {
                                                 const meta = cell.column.columnDef.meta;
                                                 return (_jsx(TableCell, { className: cn('max-w-[500px] truncate overflow-hidden border-r px-7', fontSizeClass, meta?.isNumeric ? 'text-right' : 'text-left'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                             }), _jsx(TableCell, { className: "border-r", children: "\u00A0" })] }, row.id))) })] }), _jsx(ScrollBar, { orientation: "vertical", className: "z-50" }), _jsx(ScrollBar, { orientation: "horizontal" })] }) }), pagination || footerActions ? (_jsxs("div", { className: "bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2", children: [pagination ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronDoubleLeftIcon, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: `ml-1 flex items-center gap-1 ${fontSizeClass}`, children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "h-8 w-16", value: internalPageIndex + 1, onChange: (e) => {

package/dist/DataTablePaginated.js.map

@@ -1 +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  resolveFontSizeClass,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  PaginationState,\n  SortingState,\n  Row,\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   * Called when a row is clicked.\n   */\n  onRowClick?: (args: {\n    row: Row<Data>;\n    event: React.MouseEvent<HTMLTableRowElement>;\n  }) => void;\n  /**\n   * Called when a row is double-clicked.\n   */\n  onRowDoubleClick?: (args: {\n    row: Row<Data>;\n    event: React.MouseEvent<HTMLTableRowElement>;\n  }) => 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  onRowClick,\n  onRowDoubleClick,\n}: DataTablePaginatedProps<Data>) {\n  const defaultData = useMemo(() => [], []);\n  const fontSizeClass = resolveFontSizeClass(fontSize);\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 top-[-1px] left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`}\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 border-r py-2 whitespace-nowrap',\n                          pagination ? 'cursor-pointer' : '',\n                          meta?.isNumeric ? 'text-right' : 'text-left',\n                          fontSizeClass,\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 border-t border-r py-2 whitespace-nowrap\" />\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row, i) => (\n                <TableRow\n                  key={row.id}\n                  className=\"hover:bg-muted bg-background\"\n                  onClick={(event) => {\n                    event.preventDefault();\n                    onRowClick?.({row: row as Row<Data>, event});\n                  }}\n                  onDoubleClick={(event) => {\n                    event.preventDefault();\n                    onRowDoubleClick?.({row: row as Row<Data>, event});\n                  }}\n                >\n                  <TableCell\n                    className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`}\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] truncate overflow-hidden border-r px-7',\n                          fontSizeClass,\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\n                  className={`ml-1 flex items-center gap-1 ${fontSizeClass}`}\n                >\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 ${fontSizeClass}`}>\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"]}
+{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Badge,\n  Button,\n  Checkbox,\n  cn,\n  Input,\n  resolveFontSizeClass,\n  ScrollArea,\n  ScrollBar,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  PaginationState,\n  Row,\n  RowSelectionState,\n  SortingState,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {\n  ChevronsLeftIcon as ChevronDoubleLeftIcon,\n  ChevronsRightIcon as ChevronDoubleRightIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from 'lucide-react';\nimport {useCallback, useEffect, useMemo, useRef, 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   * Called when a row is clicked.\n   */\n  onRowClick?: (args: {\n    row: Row<Data>;\n    event: React.MouseEvent<HTMLTableRowElement>;\n  }) => void;\n  /**\n   * Called when a row is double-clicked.\n   */\n  onRowDoubleClick?: (args: {\n    row: Row<Data>;\n    event: React.MouseEvent<HTMLTableRowElement>;\n  }) => void;\n  /**\n   * Enables row selection with checkboxes. When true, a checkbox column is added.\n   */\n  enableRowSelection?: boolean;\n  /**\n   * Controlled row selection state. Keys are row indices, values are selection status.\n   */\n  rowSelection?: RowSelectionState;\n  /**\n   * Called when row selection changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n};\n\n/**\n * Data table with pagination, sorting, row selection, and custom actions.\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  onRowClick,\n  onRowDoubleClick,\n  enableRowSelection,\n  rowSelection,\n  onRowSelectionChange,\n}: DataTablePaginatedProps<Data>) {\n  const defaultData = useMemo(() => [], []);\n  const [internalRowSelection, setInternalRowSelection] =\n    useState<RowSelectionState>({});\n\n  // Use controlled or uncontrolled row selection\n  const currentRowSelection = rowSelection ?? internalRowSelection;\n  const currentRowSelectionRef = useRef(currentRowSelection);\n\n  useEffect(() => {\n    currentRowSelectionRef.current = currentRowSelection;\n  }, [currentRowSelection]);\n\n  const handleRowSelectionChange = useCallback(\n    (\n      updaterOrValue:\n        | RowSelectionState\n        | ((old: RowSelectionState) => RowSelectionState),\n    ) => {\n      if (onRowSelectionChange) {\n        const newValue =\n          typeof updaterOrValue === 'function'\n            ? updaterOrValue(currentRowSelectionRef.current)\n            : updaterOrValue;\n        onRowSelectionChange(newValue);\n      } else {\n        setInternalRowSelection(updaterOrValue);\n      }\n    },\n    [onRowSelectionChange, setInternalRowSelection],\n  );\n\n  const fontSizeClass = resolveFontSizeClass(fontSize);\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    enableRowSelection: enableRowSelection ?? false,\n    onRowSelectionChange: (update) => {\n      handleRowSelectionChange(update);\n    },\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      rowSelection: currentRowSelection,\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 -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`}\n                  >\n                    {isFetching ? (\n                      <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n                    ) : enableRowSelection ? (\n                      <Checkbox\n                        checked={\n                          table.getIsAllPageRowsSelected() ||\n                          (table.getIsSomePageRowsSelected() && 'indeterminate')\n                        }\n                        onCheckedChange={(value) =>\n                          table.toggleAllPageRowsSelected(!!value)\n                        }\n                        aria-label=\"Select all\"\n                      />\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-px z-10 w-auto border-r py-2 whitespace-nowrap',\n                          pagination ? 'cursor-pointer' : '',\n                          meta?.isNumeric ? 'text-right' : 'text-left',\n                          fontSizeClass,\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-px w-full border-t border-r py-2 whitespace-nowrap\" />\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row, i) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() ? 'selected' : undefined}\n                  className={cn(\n                    'hover:bg-muted bg-background',\n                    row.getIsSelected() && 'bg-muted',\n                  )}\n                  onClick={\n                    onRowClick\n                      ? (event) => {\n                          event.preventDefault();\n                          onRowClick({row: row as Row<Data>, event});\n                        }\n                      : undefined\n                  }\n                  onDoubleClick={\n                    onRowDoubleClick\n                      ? (event) => {\n                          event.preventDefault();\n                          onRowDoubleClick({row: row as Row<Data>, event});\n                        }\n                      : undefined\n                  }\n                >\n                  <TableCell\n                    className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`}\n                  >\n                    {enableRowSelection ? (\n                      <Checkbox\n                        checked={row.getIsSelected()}\n                        onCheckedChange={(value) => row.toggleSelected(!!value)}\n                        onClick={(event) => event.stopPropagation()}\n                        aria-label=\"Select row\"\n                      />\n                    ) : pagination ? (\n                      `${pagination.pageIndex * pagination.pageSize + i + 1}`\n                    ) : (\n                      `${i + 1}`\n                    )}\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] truncate overflow-hidden border-r px-7',\n                          fontSizeClass,\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\n                  className={`ml-1 flex items-center gap-1 ${fontSizeClass}`}\n                >\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 ${fontSizeClass}`}>\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"]}

package/dist/QueryDataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAA2B,EACzB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAE9B,OAA0B,EAAC,4BAA4B,EAAC,MAAM,qBAAqB,CAAC;AAGpF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkD3C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAA2B,EACzB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAE9B,OAA0B,EACxB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAG7B,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoD3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/QueryDataTable.js

@@ -18,7 +18,9 @@ const QueryDataTable = ({ className, fontSize = 'text-xs', query, renderActions
     const countQueryResult = useSql({
         query: `SELECT COUNT(*)::int AS count FROM (${sanitizedQuery})`,
     });
-    const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable, { formatValue });
+    const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable, {
+        formatValue,
+    });
     if (queryResult.error) {
         return (_jsx("div", { className: "h-full w-full overflow-auto p-5", children: _jsx("pre", { className: "text-xs leading-tight text-red-500", children: queryResult.error?.message ?? 'Unknown error' }) }));
     }

package/dist/QueryDataTable.js.map

@@ -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,iBAAiD,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAavC,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,EACtE,WAAW,GACZ,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,EAAE,EAAC,WAAW,EAAC,CAAC,CAAC;IAEtF,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, {ArrowDataTableValueFormatter} 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  /** Custom value formatter for arrow data */\n  formatValue?: ArrowDataTableValueFormatter;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n  className,\n  fontSize = 'text-xs',\n  query,\n  renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n  formatValue,\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, {formatValue});\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"]}
+{"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,iBAEN,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAavC,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,EACtE,WAAW,GACZ,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,EAAE;QACrE,WAAW;KACZ,CAAC,CAAC;IAEH,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, {\n  ArrowDataTableValueFormatter,\n} 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  /** Custom value formatter for arrow data */\n  formatValue?: ArrowDataTableValueFormatter;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n  className,\n  fontSize = 'text-xs',\n  query,\n  renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n  formatValue,\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    formatValue,\n  });\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/dist/index.d.ts

@@ -2,13 +2,14 @@
  * {@include ../README.md}
  * @packageDocumentation
  */
-export { default as DataTableModal, type DataTableModalProps } from './DataTableModal';
+export { default as DataTableModal, type DataTableModalProps, } from './DataTableModal';
 export { default as DataTablePaginated, type DataTablePaginatedProps, } from './DataTablePaginated';
 export { default as DataTableVirtualized, type DataTableVirtualizedProps, type DataTableProps, } from './DataTableVirtualized';
 export { default as QueryDataTable, type QueryDataTableProps, } from './QueryDataTable';
 export { default as useArrowDataTable, type ArrowColumnMeta, type ArrowDataTableValueFormatter, type UseArrowDataTableOptions, } from './useArrowDataTable';
 export { ColumnTypeBadge } from './ColumnTypeBadge';
-export { DataTableArrowPaginated, type DataTableArrowPaginatedProps } from './DataTableArrowPaginated';
+export { DataTableArrowPaginated, type DataTableArrowPaginatedProps, } from './DataTableArrowPaginated';
 export { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
 export { makePagedQuery } from './utils';
+export type { RowSelectionState } from '@tanstack/react-table';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,OAAO,IAAI,cAAc,EAAE,KAAK,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AACrF,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,cAAc,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,eAAe,EACpB,KAAK,4BAA4B,EACjC,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,uBAAuB,EAAE,KAAK,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,cAAc,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,eAAe,EACpB,KAAK,4BAA4B,EACjC,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,KAAK,4BAA4B,GAClC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAGvC,YAAY,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -2,13 +2,13 @@
  * {@include ../README.md}
  * @packageDocumentation
  */
-export { default as DataTableModal } from './DataTableModal';
+export { default as DataTableModal, } from './DataTableModal';
 export { default as DataTablePaginated, } from './DataTablePaginated';
 export { default as DataTableVirtualized, } from './DataTableVirtualized';
 export { default as QueryDataTable, } from './QueryDataTable';
 export { default as useArrowDataTable, } from './useArrowDataTable';
 export { ColumnTypeBadge } from './ColumnTypeBadge';
-export { DataTableArrowPaginated } from './DataTableArrowPaginated';
+export { DataTableArrowPaginated, } from './DataTableArrowPaginated';
 export { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
 export { makePagedQuery } from './utils';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,OAAO,IAAI,cAAc,EAA2B,MAAM,kBAAkB,CAAC;AACrF,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,OAAO,IAAI,oBAAoB,GAGhC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,OAAO,IAAI,cAAc,GAE1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,iBAAiB,GAI7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,uBAAuB,EAAoC,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {default as DataTableModal, type DataTableModalProps} from './DataTableModal';\nexport {\n  default as DataTablePaginated,\n  type DataTablePaginatedProps,\n} from './DataTablePaginated';\nexport {\n  default as DataTableVirtualized,\n  type DataTableVirtualizedProps,\n  type DataTableProps,\n} from './DataTableVirtualized';\nexport {\n  default as QueryDataTable,\n  type QueryDataTableProps,\n} from './QueryDataTable';\nexport {\n  default as useArrowDataTable,\n  type ArrowColumnMeta,\n  type ArrowDataTableValueFormatter,\n  type UseArrowDataTableOptions,\n} from './useArrowDataTable';\nexport {ColumnTypeBadge} from './ColumnTypeBadge';\nexport {DataTableArrowPaginated, type DataTableArrowPaginatedProps} from './DataTableArrowPaginated';\nexport {QueryDataTableActionsMenu} from './QueryDataTableActionsMenu';\nexport {makePagedQuery} from './utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,OAAO,IAAI,cAAc,GAE1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,OAAO,IAAI,oBAAoB,GAGhC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,OAAO,IAAI,cAAc,GAE1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,iBAAiB,GAI7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,uBAAuB,GAExB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {\n  default as DataTableModal,\n  type DataTableModalProps,\n} from './DataTableModal';\nexport {\n  default as DataTablePaginated,\n  type DataTablePaginatedProps,\n} from './DataTablePaginated';\nexport {\n  default as DataTableVirtualized,\n  type DataTableVirtualizedProps,\n  type DataTableProps,\n} from './DataTableVirtualized';\nexport {\n  default as QueryDataTable,\n  type QueryDataTableProps,\n} from './QueryDataTable';\nexport {\n  default as useArrowDataTable,\n  type ArrowColumnMeta,\n  type ArrowDataTableValueFormatter,\n  type UseArrowDataTableOptions,\n} from './useArrowDataTable';\nexport {ColumnTypeBadge} from './ColumnTypeBadge';\nexport {\n  DataTableArrowPaginated,\n  type DataTableArrowPaginatedProps,\n} from './DataTableArrowPaginated';\nexport {QueryDataTableActionsMenu} from './QueryDataTableActionsMenu';\nexport {makePagedQuery} from './utils';\n\n// Re-export useful types from @tanstack/react-table\nexport type {RowSelectionState} from '@tanstack/react-table';\n"]}

package/dist/useArrowDataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAOtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAkFF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,4BAA4B,GAAG,CACzC,IAAI,EAAE,KAAK,CAAC,QAAQ,EACpB,KAAK,EAAE,OAAO,KACX,MAAM,GAAG,SAAS,CAAC;AAExB,MAAM,MAAM,wBAAwB,GAAG;IACrC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAGF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,EAC9B,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,GAAG,SAAS,CAkGrC"}
+{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAQtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAkFF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,4BAA4B,GAAG,CACzC,IAAI,EAAE,KAAK,CAAC,QAAQ,EACpB,KAAK,EAAE,OAAO,KACX,MAAM,GAAG,SAAS,CAAC;AAExB,MAAM,MAAM,wBAAwB,GAAG;IACrC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAGF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,EAC9B,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,GAAG,SAAS,CAkGrC"}

package/dist/useArrowDataTable.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JsonMonacoEditor } from '@sqlrooms/monaco-editor';
 import { Button, Popover, PopoverContent, PopoverTrigger, resolveFontSizeClass, } from '@sqlrooms/ui';
 import { safeJsonParse, shorten, toDecimalString } from '@sqlrooms/utils';
-import { ClipboardIcon } from 'lucide-react';
 import { createColumnHelper } from '@tanstack/react-table';
 import * as arrow from 'apache-arrow';
+import { ClipboardIcon } from 'lucide-react';
 import { useMemo } from 'react';
 const columnHelper = createColumnHelper();
 const MAX_VALUE_LENGTH = 64;
@@ -99,7 +99,7 @@ export default function useArrowDataTable(table, options = {}) {
                                                     minimap: { enabled: false },
                                                     scrollBeyondLastLine: false,
                                                     wordWrap: 'on',
-                                                } })) : (_jsx("div", { className: "font-mono text-xs break-words whitespace-pre-wrap", children: valueStr })) }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "xs", onClick: () => navigator.clipboard.writeText(valueStr), children: _jsx(ClipboardIcon, { className: "h-3 w-3" }) }) })] }) })] })) : (valueStr);
+                                                } })) : (_jsx("div", { className: "font-mono text-xs wrap-break-word whitespace-pre-wrap", children: valueStr })) }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "xs", onClick: () => navigator.clipboard.writeText(valueStr), children: _jsx(ClipboardIcon, { className: "h-3 w-3" }) }) })] }) })] })) : (valueStr);
                 },
                 header: shorten(field.name, MAX_VALUE_LENGTH),
                 meta: {

package/dist/useArrowDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';\nimport {\n  Button,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  resolveFontSizeClass,\n} from '@sqlrooms/ui';\nimport {safeJsonParse, shorten, toDecimalString} from '@sqlrooms/utils';\nimport {ClipboardIcon} from 'lucide-react';\nimport {createColumnHelper} from '@tanstack/react-table';\nimport {ColumnDef} from '@tanstack/table-core';\nimport * as arrow from 'apache-arrow';\nimport {useMemo} from 'react';\n\nconst columnHelper = createColumnHelper();\n\n// TODO: support fetch the result chunks lazily https://github.com/duckdb/duckdb-wasm/tree/master/packages/duckdb-wasm#query-execution\n\ntype UseArrowDataTableResult = {\n  data: ArrayLike<any>;\n  columns: ColumnDef<any, any>[];\n};\n\nexport type ArrowColumnMeta = {\n  type: arrow.DataType;\n  isNumeric: boolean;\n};\n\nconst MAX_VALUE_LENGTH = 64;\n\n/**\n * Converts an Arrow value into a human-readable string.\n */\nfunction valueToString(type: arrow.DataType, value: unknown): string {\n  if (value === null || value === undefined) return 'NULL';\n\n  // --- DECIMAL ---\n  if (arrow.DataType.isDecimal(type)) {\n    const scale = (type as any).scale ?? 0;\n\n    if (value instanceof Uint32Array) {\n      // Use Apache Arrow–style helper to convert Decimal128 buffer to string\n      return toDecimalString(value, scale);\n    }\n\n    // For non-Uint32Array values, fall back to default string rendering.\n    return String(value);\n  }\n\n  // --- TIMESTAMP ---\n  if (arrow.DataType.isTimestamp(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value)).toISOString();\n      case 'string':\n        return new Date(value).toISOString();\n    }\n  }\n\n  // --- TIME ---\n  if (arrow.DataType.isTime(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value) / 1000).toISOString().substring(11, 19);\n      case 'string':\n        return new Date(value).toISOString().substring(11, 19);\n    }\n  }\n\n  // --- DATE ---\n  // Handle Arrow Date32/Date64 values coming from DuckDB-WASM.\n  //\n  // 1. If `value` is already a JS Date, format it directly.\n  // 2. If store config`castTimestampToDate` is true, DuckDB may return a number or bigint:\n  // 3. If `value` is a string, try to parse it as a date.\n  //\n  // This ensures DATE columns are displayed as \"YYYY-MM-DD\" regardless of underlying Arrow type.\n  if (arrow.DataType.isDate(type)) {\n    const dateType = type as arrow.Date_;\n\n    // Already a JS Date\n    if (value instanceof Date) return value.toISOString().slice(0, 10);\n\n    if (typeof value === 'number' || typeof value === 'bigint') {\n      const num = Number(value);\n      if (!Number.isFinite(num)) return String(num);\n\n      const d = new Date(num);\n      if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n\n      return String(num);\n    }\n\n    // Fallback for strings\n    if (typeof value === 'string') {\n      const d = new Date(value);\n      if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n    }\n\n    return String(value);\n  }\n\n  // --- fallback ---\n  return String(value);\n}\n\n/**\n * Formatter for rendering Arrow cell values in data tables.\n * Return a string to override the default formatting.\n * If you don't return anything (or return undefined), the default formatter is used.\n *\n * @param type - The Arrow DataType for the column\n * @param value - The raw cell value\n * @returns A formatted string, or undefined/nothing to fall back to the default\n *\n * @example\n * ```ts\n * formatValue: (type, value) => {\n *   if (arrow.DataType.isDecimal(type)) {\n *     return `$${value}`;\n *   }\n *   if (arrow.DataType.isBinary(type) && value instanceof Uint8Array) {\n *     return `${value.byteLength} bytes`;\n *   }\n * }\n * ```\n */\nexport type ArrowDataTableValueFormatter = (\n  type: arrow.DataType,\n  value: unknown,\n) => string | undefined;\n\nexport type UseArrowDataTableOptions = {\n  /** Custom font size for the table e.g. xs, sm, md, lg, base */\n  fontSize?: string;\n  /**\n   * Custom value formatter that overrides the default valueToString.\n   * Return a string to use your custom formatting, or undefined to fall back to the default.\n   */\n  formatValue?: ArrowDataTableValueFormatter;\n};\n\n// Only use for small tables or in combination with pagination\nexport default function useArrowDataTable(\n  table: arrow.Table | undefined,\n  options: UseArrowDataTableOptions = {},\n): UseArrowDataTableResult | undefined {\n  const {fontSize = 'base', formatValue} = options;\n  const fontSizeClass = resolveFontSizeClass(fontSize);\n  const data = useMemo(() => ({length: table?.numRows ?? 0}), [table]);\n  const columns = useMemo(() => {\n    if (!table) return undefined;\n    const columns: ColumnDef<any, any>[] = [];\n    for (const field of table.schema.fields) {\n      columns.push(\n        columnHelper.accessor((_row, i) => table.getChild(field.name)?.get(i), {\n          cell: (info) => {\n            const value = info.getValue();\n            const valueStr =\n              formatValue?.(field.type, value) ??\n              valueToString(field.type, value);\n            const parsedJson = safeJsonParse<unknown>(valueStr);\n            const isJsonValue = parsedJson !== undefined;\n\n            return valueStr.length > MAX_VALUE_LENGTH ? (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <span className=\"cursor-pointer\">\n                    {shorten(`${valueStr}`, MAX_VALUE_LENGTH)}\n                  </span>\n                </PopoverTrigger>\n\n                {/* Fixed PopoverContent width */}\n                <PopoverContent\n                  sideOffset={4}\n                  align=\"center\"\n                  className={`w-[400px] max-w-[90vw] p-4 ${fontSizeClass} rounded-md shadow-md`}\n                >\n                  <div className=\"space-y-2\">\n                    {/* Header row */}\n                    <div className=\"flex items-center gap-2 text-xs\">\n                      <span\n                        className=\"min-w-0 flex-1 font-medium\"\n                        title={field.name}\n                      >\n                        {shorten(field.name, MAX_VALUE_LENGTH)}\n                      </span>\n                      <span className=\"text-muted-foreground shrink-0\">\n                        {`(${field.type})`}\n                      </span>\n                    </div>\n\n                    {/* Scrollable content - JSON or raw text */}\n                    <div className=\"max-h-[300px] min-h-[100px] overflow-auto\">\n                      {isJsonValue && parsedJson ? (\n                        <JsonMonacoEditor\n                          value={parsedJson as any}\n                          readOnly={true}\n                          options={{\n                            lineNumbers: 'off',\n                            minimap: {enabled: false},\n                            scrollBeyondLastLine: false,\n                            wordWrap: 'on',\n                          }}\n                        />\n                      ) : (\n                        <div className=\"font-mono text-xs break-words whitespace-pre-wrap\">\n                          {valueStr}\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Copy button */}\n                    <div className=\"mt-2 flex justify-end\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        onClick={() => navigator.clipboard.writeText(valueStr)}\n                      >\n                        <ClipboardIcon className=\"h-3 w-3\" />\n                      </Button>\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n            ) : (\n              valueStr\n            );\n          },\n          header: shorten(field.name, MAX_VALUE_LENGTH),\n          meta: {\n            type: field.type,\n            isNumeric:\n              arrow.DataType.isFloat(field.type) ||\n              arrow.DataType.isDecimal(field.type) ||\n              arrow.DataType.isInt(field.type),\n          },\n        }),\n      );\n    }\n    return columns;\n  }, [table, fontSizeClass, formatValue]);\n\n  return data && columns ? {data, columns} : undefined;\n}\n"]}
+{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';\nimport {\n  Button,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  resolveFontSizeClass,\n} from '@sqlrooms/ui';\nimport {safeJsonParse, shorten, toDecimalString} from '@sqlrooms/utils';\nimport {createColumnHelper} from '@tanstack/react-table';\nimport {ColumnDef} from '@tanstack/table-core';\nimport * as arrow from 'apache-arrow';\nimport {ClipboardIcon} from 'lucide-react';\nimport {useMemo} from 'react';\n\nconst columnHelper = createColumnHelper();\n\n// TODO: support fetch the result chunks lazily https://github.com/duckdb/duckdb-wasm/tree/master/packages/duckdb-wasm#query-execution\n\ntype UseArrowDataTableResult = {\n  data: ArrayLike<any>;\n  columns: ColumnDef<any, any>[];\n};\n\nexport type ArrowColumnMeta = {\n  type: arrow.DataType;\n  isNumeric: boolean;\n};\n\nconst MAX_VALUE_LENGTH = 64;\n\n/**\n * Converts an Arrow value into a human-readable string.\n */\nfunction valueToString(type: arrow.DataType, value: unknown): string {\n  if (value === null || value === undefined) return 'NULL';\n\n  // --- DECIMAL ---\n  if (arrow.DataType.isDecimal(type)) {\n    const scale = (type as any).scale ?? 0;\n\n    if (value instanceof Uint32Array) {\n      // Use Apache Arrow–style helper to convert Decimal128 buffer to string\n      return toDecimalString(value, scale);\n    }\n\n    // For non-Uint32Array values, fall back to default string rendering.\n    return String(value);\n  }\n\n  // --- TIMESTAMP ---\n  if (arrow.DataType.isTimestamp(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value)).toISOString();\n      case 'string':\n        return new Date(value).toISOString();\n    }\n  }\n\n  // --- TIME ---\n  if (arrow.DataType.isTime(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value) / 1000).toISOString().substring(11, 19);\n      case 'string':\n        return new Date(value).toISOString().substring(11, 19);\n    }\n  }\n\n  // --- DATE ---\n  // Handle Arrow Date32/Date64 values coming from DuckDB-WASM.\n  //\n  // 1. If `value` is already a JS Date, format it directly.\n  // 2. If store config`castTimestampToDate` is true, DuckDB may return a number or bigint:\n  // 3. If `value` is a string, try to parse it as a date.\n  //\n  // This ensures DATE columns are displayed as \"YYYY-MM-DD\" regardless of underlying Arrow type.\n  if (arrow.DataType.isDate(type)) {\n    const dateType = type as arrow.Date_;\n\n    // Already a JS Date\n    if (value instanceof Date) return value.toISOString().slice(0, 10);\n\n    if (typeof value === 'number' || typeof value === 'bigint') {\n      const num = Number(value);\n      if (!Number.isFinite(num)) return String(num);\n\n      const d = new Date(num);\n      if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n\n      return String(num);\n    }\n\n    // Fallback for strings\n    if (typeof value === 'string') {\n      const d = new Date(value);\n      if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n    }\n\n    return String(value);\n  }\n\n  // --- fallback ---\n  return String(value);\n}\n\n/**\n * Formatter for rendering Arrow cell values in data tables.\n * Return a string to override the default formatting.\n * If you don't return anything (or return undefined), the default formatter is used.\n *\n * @param type - The Arrow DataType for the column\n * @param value - The raw cell value\n * @returns A formatted string, or undefined/nothing to fall back to the default\n *\n * @example\n * ```ts\n * formatValue: (type, value) => {\n *   if (arrow.DataType.isDecimal(type)) {\n *     return `$${value}`;\n *   }\n *   if (arrow.DataType.isBinary(type) && value instanceof Uint8Array) {\n *     return `${value.byteLength} bytes`;\n *   }\n * }\n * ```\n */\nexport type ArrowDataTableValueFormatter = (\n  type: arrow.DataType,\n  value: unknown,\n) => string | undefined;\n\nexport type UseArrowDataTableOptions = {\n  /** Custom font size for the table e.g. xs, sm, md, lg, base */\n  fontSize?: string;\n  /**\n   * Custom value formatter that overrides the default valueToString.\n   * Return a string to use your custom formatting, or undefined to fall back to the default.\n   */\n  formatValue?: ArrowDataTableValueFormatter;\n};\n\n// Only use for small tables or in combination with pagination\nexport default function useArrowDataTable(\n  table: arrow.Table | undefined,\n  options: UseArrowDataTableOptions = {},\n): UseArrowDataTableResult | undefined {\n  const {fontSize = 'base', formatValue} = options;\n  const fontSizeClass = resolveFontSizeClass(fontSize);\n  const data = useMemo(() => ({length: table?.numRows ?? 0}), [table]);\n  const columns = useMemo(() => {\n    if (!table) return undefined;\n    const columns: ColumnDef<any, any>[] = [];\n    for (const field of table.schema.fields) {\n      columns.push(\n        columnHelper.accessor((_row, i) => table.getChild(field.name)?.get(i), {\n          cell: (info) => {\n            const value = info.getValue();\n            const valueStr =\n              formatValue?.(field.type, value) ??\n              valueToString(field.type, value);\n            const parsedJson = safeJsonParse<unknown>(valueStr);\n            const isJsonValue = parsedJson !== undefined;\n\n            return valueStr.length > MAX_VALUE_LENGTH ? (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <span className=\"cursor-pointer\">\n                    {shorten(`${valueStr}`, MAX_VALUE_LENGTH)}\n                  </span>\n                </PopoverTrigger>\n\n                {/* Fixed PopoverContent width */}\n                <PopoverContent\n                  sideOffset={4}\n                  align=\"center\"\n                  className={`w-[400px] max-w-[90vw] p-4 ${fontSizeClass} rounded-md shadow-md`}\n                >\n                  <div className=\"space-y-2\">\n                    {/* Header row */}\n                    <div className=\"flex items-center gap-2 text-xs\">\n                      <span\n                        className=\"min-w-0 flex-1 font-medium\"\n                        title={field.name}\n                      >\n                        {shorten(field.name, MAX_VALUE_LENGTH)}\n                      </span>\n                      <span className=\"text-muted-foreground shrink-0\">\n                        {`(${field.type})`}\n                      </span>\n                    </div>\n\n                    {/* Scrollable content - JSON or raw text */}\n                    <div className=\"max-h-[300px] min-h-[100px] overflow-auto\">\n                      {isJsonValue && parsedJson ? (\n                        <JsonMonacoEditor\n                          value={parsedJson as any}\n                          readOnly={true}\n                          options={{\n                            lineNumbers: 'off',\n                            minimap: {enabled: false},\n                            scrollBeyondLastLine: false,\n                            wordWrap: 'on',\n                          }}\n                        />\n                      ) : (\n                        <div className=\"font-mono text-xs wrap-break-word whitespace-pre-wrap\">\n                          {valueStr}\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Copy button */}\n                    <div className=\"mt-2 flex justify-end\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        onClick={() => navigator.clipboard.writeText(valueStr)}\n                      >\n                        <ClipboardIcon className=\"h-3 w-3\" />\n                      </Button>\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n            ) : (\n              valueStr\n            );\n          },\n          header: shorten(field.name, MAX_VALUE_LENGTH),\n          meta: {\n            type: field.type,\n            isNumeric:\n              arrow.DataType.isFloat(field.type) ||\n              arrow.DataType.isDecimal(field.type) ||\n              arrow.DataType.isInt(field.type),\n          },\n        }),\n      );\n    }\n    return columns;\n  }, [table, fontSizeClass, formatValue]);\n\n  return data && columns ? {data, columns} : undefined;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/data-table",
-  "version": "0.27.0-rc.5",
+  "version": "0.28.0-rc.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -19,10 +19,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sqlrooms/duckdb": "0.27.0-rc.5",
-    "@sqlrooms/monaco-editor": "0.27.0-rc.5",
-    "@sqlrooms/ui": "0.27.0-rc.5",
-    "@sqlrooms/utils": "0.27.0-rc.5",
+    "@sqlrooms/duckdb": "0.28.0-rc.0",
+    "@sqlrooms/monaco-editor": "0.28.0-rc.0",
+    "@sqlrooms/ui": "0.28.0-rc.0",
+    "@sqlrooms/utils": "0.28.0-rc.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "lucide-react": "^0.556.0",
@@ -40,5 +40,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "d860b9100d63e0d4029712872741abfa3a9c31a1"
+  "gitHead": "87a478edbff690e04c38cc717db8e11e844565c8"
 }