@jakubmazanec/ui 0.6.1-next.4df71cb5 → 0.6.1-next.ce79adcb

package/build/components/data-table/DataTable.js

@@ -177,7 +177,8 @@ export function DataTable({
     onColumnFiltersChange: clientFilters ? setColumnFilters : void 0,
     onGlobalFilterChange: clientSearch ? setSearch : void 0,
     columnResizeMode: "onChange",
-    globalFilterFn: fuzzyFilter
+    globalFilterFn: fuzzyFilter,
+    getColumnCanGlobalFilter: () => true
   });
   let page = clientPagination ? table.getState().pagination.pageIndex + 1 : controlledPagination?.page ?? 1;
   let pageSize = clientPagination ? table.getState().pagination.pageSize : controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE;

package/build/components/data-table/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../source/components/data-table/DataTable.tsx"],
-  "sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnOrderState,\n  type ColumnPinningState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type Header,\n  type PaginationState,\n  type Row,\n  type RowData,\n  type SortingState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Container} from '../Container.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n  DataTableFilters as DataTableFiltersComponent,\n  DataTableHeader,\n  DataTableMenu,\n  DataTablePagination as DataTablePaginationComponent,\n  DataTableSearch as DataTableSearchComponent,\n  DEFAULT_PAGE_SIZE,\n  fromPinningState,\n  fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: 'range' | 'select' | 'text';\n  }\n}\n\nexport type DataTableProps<D, C> = {\n  data: D[];\n  columns: C;\n  clientPagination?: boolean | undefined;\n  hidePagination?: boolean | undefined;\n  pagination?: DataTablePagination | undefined;\n  onPaginationChange?:\n    | ((\n        pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n      ) => void)\n    | undefined;\n  columnVisibility?: DataTableColumnVisibility;\n  hideColumnVisibility?: boolean | undefined;\n  onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n  columnOrder?: DataTableColumnOrder;\n  hideColumnOrder?: boolean | undefined;\n  onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n  columnPinning?: DataTableColumnPinning;\n  hideColumnPinning?: boolean | undefined;\n  onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n  hideColumnResizing?: boolean | undefined;\n  clientSorting?: boolean | undefined;\n  sorting?: DataTableSorting | undefined;\n  hideSorting?: boolean | undefined;\n  onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n  clientFilters?: boolean | undefined;\n  hideFilters?: boolean | undefined;\n  filters?: DataTableFilters | undefined;\n  onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n  clientFaceting?: boolean | undefined;\n  faceting?: DataTableFaceting | undefined;\n  clientSearch?: boolean | undefined;\n  hideSearch?: boolean | undefined;\n  search?: DataTableSearch | undefined;\n  onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n  showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n  data,\n  columns,\n  clientPagination = false,\n  hidePagination = false,\n  pagination: controlledPagination,\n  onPaginationChange,\n  clientSorting = false,\n  sorting: controlledSorting,\n  hideSorting = false,\n  onSortingChange,\n  columnVisibility: controlledColumnVisibility,\n  hideColumnVisibility = false,\n  onColumnVisibilityChange,\n  columnOrder: controlledColumnOrder,\n  hideColumnOrder = false,\n  onColumnOrderChange,\n  columnPinning: controlledColumnPinning,\n  hideColumnPinning = false,\n  onColumnPinningChange,\n  hideColumnResizing = false,\n  clientFilters = false,\n  hideFilters = false,\n  filters: controlledFilters,\n  onFiltersChange,\n  clientFaceting = false,\n  faceting,\n  clientSearch = false,\n  hideSearch = false,\n  search: controlledSearch,\n  onSearchChange,\n  showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n  let [pagination, setPagination] = useState<PaginationState>(\n    controlledPagination ?\n      {\n        pageIndex: Math.max(0, controlledPagination.page - 1),\n        pageSize: controlledPagination.pageSize,\n      }\n    : {\n        pageIndex: 0,\n        pageSize: DEFAULT_PAGE_SIZE,\n      },\n  );\n  let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n  let [columnOrder, setColumnOrder] = useState<string[]>(\n    controlledColumnOrder ?\n      [\n        ...controlledColumnOrder,\n        ...columns\n          .map((column, index) => {\n            if (column.id) {\n              return column.id;\n            }\n\n            if ('accessorKey' in column) {\n              return String(column.accessorKey);\n            }\n\n            if (typeof column.header === 'string') {\n              return String(column.header);\n            }\n\n            return String(index);\n          })\n          .filter((value) => !controlledColumnOrder.includes(value)),\n      ]\n    : columns.map((column, index) => {\n        if (column.id) {\n          return column.id;\n        }\n\n        if ('accessorKey' in column) {\n          return String(column.accessorKey);\n        }\n\n        if (typeof column.header === 'string') {\n          return String(column.header);\n        }\n\n        return String(index);\n      }),\n  );\n  let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n    controlledColumnPinning ?\n      {\n        left: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'left')\n          .map(([column]) => column),\n        right: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'right')\n          .map(([column]) => column),\n      }\n    : {left: [], right: []},\n  );\n  let [sorting, setSorting] = useState<SortingState>([]);\n  let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  let [showFilters, setShowFilters] = useState(false);\n  let [search, setSearch] = useState('');\n  let [showRowSummary, setShowRowSummary] = useState(false);\n  let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);\n\n  let handleColumnVisibilityChange = useCallback(\n    (columnVisibilityState: Updater<VisibilityState>) => {\n      setColumnVisibility(columnVisibilityState);\n\n      if (typeof columnVisibilityState === 'function') {\n        onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n      } else {\n        onColumnVisibilityChange?.(columnVisibilityState);\n      }\n    },\n    [columnVisibility, onColumnVisibilityChange],\n  );\n  let handleColumnOrderChange = useCallback(\n    (columnOrderState: Updater<ColumnOrderState>) => {\n      setColumnOrder(columnOrderState);\n\n      if (typeof columnOrderState === 'function') {\n        onColumnOrderChange?.(columnOrderState(columnOrder));\n      } else {\n        onColumnOrderChange?.(columnOrderState);\n      }\n    },\n    [columnOrder, onColumnOrderChange],\n  );\n  let handleColumnPinningChange = useCallback(\n    (columnPinningState: Updater<ColumnPinningState>) => {\n      setColumnPinning(columnPinningState);\n\n      if (typeof columnPinningState === 'function') {\n        onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n      } else {\n        onColumnPinningChange?.(fromPinningState(columnPinningState));\n      }\n    },\n    [columnPinning, onColumnPinningChange],\n  );\n\n  let table = useReactTable<D>({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n    getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n    getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n    state: {\n      pagination: clientPagination ? pagination : undefined,\n      columnVisibility,\n      columnOrder,\n      columnPinning,\n      sorting: clientSorting ? sorting : undefined,\n      columnFilters: clientFilters ? columnFilters : undefined,\n      globalFilter: clientSearch ? search : undefined,\n    },\n    onPaginationChange: clientPagination ? setPagination : undefined,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onColumnOrderChange: handleColumnOrderChange,\n    onColumnPinningChange: handleColumnPinningChange,\n    onSortingChange: clientSorting ? setSorting : undefined,\n    onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n    onGlobalFilterChange: clientSearch ? setSearch : undefined,\n    columnResizeMode: 'onChange',\n    globalFilterFn: fuzzyFilter,\n  });\n\n  let page =\n    clientPagination ?\n      table.getState().pagination.pageIndex + 1\n    : (controlledPagination?.page ?? 1);\n  let pageSize =\n    clientPagination ?\n      table.getState().pagination.pageSize\n    : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n  let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n  let toggleFilters = useCallback(() => {\n    setShowFilters((value) => !value);\n  }, []);\n\n  let handleRowClick = useCallback((row: Row<D>) => {\n    setRowSummaryRow(row);\n    setShowRowSummary(true);\n  }, []);\n\n  let handleCloseRowDialog = useCallback(() => {\n    setShowRowSummary(false);\n  }, []);\n\n  return (\n    <div\n      className=\"group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]\"\n      data-show-filters={showFilters || undefined}\n    >\n      <div className=\"flex flex-col gap-2\">\n        {hideSearch ? null : (\n          <DataTableSearchComponent\n            clientSearch={clientSearch}\n            search={controlledSearch}\n            table={table}\n            onSearch={onSearchChange}\n          />\n        )}\n        {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n          <DataTableMenu\n            hideColumnOrder={hideColumnOrder}\n            hideColumnPinning={hideColumnPinning}\n            hideColumnVisibility={hideColumnVisibility}\n            hideFilters={hideFilters}\n            table={table}\n            toggleFilters={toggleFilters}\n          />\n        )}\n      </div>\n      {hideFilters ? null : (\n        <DataTableFiltersComponent\n          clientFaceting={clientFaceting}\n          clientFilters={clientFilters}\n          faceting={faceting}\n          filters={controlledFilters}\n          table={table}\n          onFiltering={onFiltersChange}\n        />\n      )}\n      <div className=\"w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible\">\n        <Table\n          style={{\n            width: table.getCenterTotalSize(),\n            tableLayout: 'fixed',\n          }}\n        >\n          <TableHead>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n                  {headerGroup.headers.map((header) => (\n                    <DataTableHeader\n                      key={header.id}\n                      clientSorting={clientSorting}\n                      header={header}\n                      hideColumnOrder={hideColumnOrder}\n                      hideColumnResizing={hideColumnResizing}\n                      hideSorting={hideSorting}\n                      sorting={controlledSorting}\n                      onSorting={onSortingChange}\n                    />\n                  ))}\n                </SortableContext>\n              </TableRow>\n            ))}\n          </TableHead>\n          <TableBody>\n            {table.getRowModel().rows.map((row) => (\n              <DataTableRow\n                key={row.id}\n                row={row}\n                onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n              />\n            ))}\n          </TableBody>\n          <TableFoot>\n            {table.getFooterGroups().map((footerGroup) => (\n              <TableRow key={footerGroup.id}>\n                {footerGroup.headers.map((header) => (\n                  <TableHeader key={header.id}>\n                    {header.isPlaceholder ? null : (\n                      flexRender(header.column.columnDef.footer, header.getContext())\n                    )}\n                  </TableHeader>\n                ))}\n              </TableRow>\n            ))}\n          </TableFoot>\n        </Table>\n      </div>\n      {hidePagination ? null : (\n        <DataTablePaginationComponent\n          clientPagination={clientPagination}\n          page={page}\n          pageCount={pageCount}\n          pageSize={pageSize}\n          table={table}\n          onPagination={onPaginationChange}\n        />\n      )}\n      {showRowSummaryOnClick ?\n        <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>\n          <DialogPanel className=\"flex flex-col gap-4\">\n            {rowSummaryRow ?\n              <Table className=\"w-full\">\n                <TableBody>\n                  {rowSummaryRow.getVisibleCells().map((cell) => (\n                    <TableRow key={cell.id}>\n                      <TableHeader className=\"px-4\">\n                        {flexRender(cell.column.columnDef.header, {\n                          table,\n                          column: cell.column,\n                          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n                          header: {column: cell.column} as Header<any, any>,\n                        })}\n                      </TableHeader>\n                      <TableCell className=\"overflow-visible whitespace-normal\">\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            : null}\n            <Container align=\"center\" direction=\"column\">\n              <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n                Close\n              </Button>\n            </Container>\n          </DialogPanel>\n        </Dialog>\n      : null}\n    </div>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnOrderState,\n  type ColumnPinningState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type Header,\n  type PaginationState,\n  type Row,\n  type RowData,\n  type SortingState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useState} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Container} from '../Container.js';\nimport {Dialog} from '../Dialog.js';\nimport {DialogPanel} from '../DialogPanel.js';\nimport {Table} from '../Table.js';\nimport {TableBody} from '../TableBody.js';\nimport {TableCell} from '../TableCell.js';\nimport {TableFoot} from '../TableFoot.js';\nimport {TableHead} from '../TableHead.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {TableRow} from '../TableRow.js';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n  DataTableFilters as DataTableFiltersComponent,\n  DataTableHeader,\n  DataTableMenu,\n  DataTablePagination as DataTablePaginationComponent,\n  DataTableSearch as DataTableSearchComponent,\n  DEFAULT_PAGE_SIZE,\n  fromPinningState,\n  fuzzyFilter,\n} from './internals.js';\nimport {DataTableRow} from './internals/DataTableRow.js';\n\ndeclare module '@tanstack/react-table' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: 'range' | 'select' | 'text';\n  }\n}\n\nexport type DataTableProps<D, C> = {\n  data: D[];\n  columns: C;\n  clientPagination?: boolean | undefined;\n  hidePagination?: boolean | undefined;\n  pagination?: DataTablePagination | undefined;\n  onPaginationChange?:\n    | ((\n        pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n      ) => void)\n    | undefined;\n  columnVisibility?: DataTableColumnVisibility;\n  hideColumnVisibility?: boolean | undefined;\n  onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n  columnOrder?: DataTableColumnOrder;\n  hideColumnOrder?: boolean | undefined;\n  onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n  columnPinning?: DataTableColumnPinning;\n  hideColumnPinning?: boolean | undefined;\n  onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n  hideColumnResizing?: boolean | undefined;\n  clientSorting?: boolean | undefined;\n  sorting?: DataTableSorting | undefined;\n  hideSorting?: boolean | undefined;\n  onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n  clientFilters?: boolean | undefined;\n  hideFilters?: boolean | undefined;\n  filters?: DataTableFilters | undefined;\n  onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n  clientFaceting?: boolean | undefined;\n  faceting?: DataTableFaceting | undefined;\n  clientSearch?: boolean | undefined;\n  hideSearch?: boolean | undefined;\n  search?: DataTableSearch | undefined;\n  onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n  showRowSummaryOnClick?: boolean | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n  data,\n  columns,\n  clientPagination = false,\n  hidePagination = false,\n  pagination: controlledPagination,\n  onPaginationChange,\n  clientSorting = false,\n  sorting: controlledSorting,\n  hideSorting = false,\n  onSortingChange,\n  columnVisibility: controlledColumnVisibility,\n  hideColumnVisibility = false,\n  onColumnVisibilityChange,\n  columnOrder: controlledColumnOrder,\n  hideColumnOrder = false,\n  onColumnOrderChange,\n  columnPinning: controlledColumnPinning,\n  hideColumnPinning = false,\n  onColumnPinningChange,\n  hideColumnResizing = false,\n  clientFilters = false,\n  hideFilters = false,\n  filters: controlledFilters,\n  onFiltersChange,\n  clientFaceting = false,\n  faceting,\n  clientSearch = false,\n  hideSearch = false,\n  search: controlledSearch,\n  onSearchChange,\n  showRowSummaryOnClick = false,\n}: DataTableProps<D, C>) {\n  let [pagination, setPagination] = useState<PaginationState>(\n    controlledPagination ?\n      {\n        pageIndex: Math.max(0, controlledPagination.page - 1),\n        pageSize: controlledPagination.pageSize,\n      }\n    : {\n        pageIndex: 0,\n        pageSize: DEFAULT_PAGE_SIZE,\n      },\n  );\n  let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n  let [columnOrder, setColumnOrder] = useState<string[]>(\n    controlledColumnOrder ?\n      [\n        ...controlledColumnOrder,\n        ...columns\n          .map((column, index) => {\n            if (column.id) {\n              return column.id;\n            }\n\n            if ('accessorKey' in column) {\n              return String(column.accessorKey);\n            }\n\n            if (typeof column.header === 'string') {\n              return String(column.header);\n            }\n\n            return String(index);\n          })\n          .filter((value) => !controlledColumnOrder.includes(value)),\n      ]\n    : columns.map((column, index) => {\n        if (column.id) {\n          return column.id;\n        }\n\n        if ('accessorKey' in column) {\n          return String(column.accessorKey);\n        }\n\n        if (typeof column.header === 'string') {\n          return String(column.header);\n        }\n\n        return String(index);\n      }),\n  );\n  let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n    controlledColumnPinning ?\n      {\n        left: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'left')\n          .map(([column]) => column),\n        right: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'right')\n          .map(([column]) => column),\n      }\n    : {left: [], right: []},\n  );\n  let [sorting, setSorting] = useState<SortingState>([]);\n  let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  let [showFilters, setShowFilters] = useState(false);\n  let [search, setSearch] = useState('');\n  let [showRowSummary, setShowRowSummary] = useState(false);\n  let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);\n\n  let handleColumnVisibilityChange = useCallback(\n    (columnVisibilityState: Updater<VisibilityState>) => {\n      setColumnVisibility(columnVisibilityState);\n\n      if (typeof columnVisibilityState === 'function') {\n        onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n      } else {\n        onColumnVisibilityChange?.(columnVisibilityState);\n      }\n    },\n    [columnVisibility, onColumnVisibilityChange],\n  );\n  let handleColumnOrderChange = useCallback(\n    (columnOrderState: Updater<ColumnOrderState>) => {\n      setColumnOrder(columnOrderState);\n\n      if (typeof columnOrderState === 'function') {\n        onColumnOrderChange?.(columnOrderState(columnOrder));\n      } else {\n        onColumnOrderChange?.(columnOrderState);\n      }\n    },\n    [columnOrder, onColumnOrderChange],\n  );\n  let handleColumnPinningChange = useCallback(\n    (columnPinningState: Updater<ColumnPinningState>) => {\n      setColumnPinning(columnPinningState);\n\n      if (typeof columnPinningState === 'function') {\n        onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n      } else {\n        onColumnPinningChange?.(fromPinningState(columnPinningState));\n      }\n    },\n    [columnPinning, onColumnPinningChange],\n  );\n\n  let table = useReactTable<D>({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n    getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n    getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n    state: {\n      pagination: clientPagination ? pagination : undefined,\n      columnVisibility,\n      columnOrder,\n      columnPinning,\n      sorting: clientSorting ? sorting : undefined,\n      columnFilters: clientFilters ? columnFilters : undefined,\n      globalFilter: clientSearch ? search : undefined,\n    },\n    onPaginationChange: clientPagination ? setPagination : undefined,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onColumnOrderChange: handleColumnOrderChange,\n    onColumnPinningChange: handleColumnPinningChange,\n    onSortingChange: clientSorting ? setSorting : undefined,\n    onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n    onGlobalFilterChange: clientSearch ? setSearch : undefined,\n    columnResizeMode: 'onChange',\n    globalFilterFn: fuzzyFilter,\n    getColumnCanGlobalFilter: () => true,\n  });\n\n  let page =\n    clientPagination ?\n      table.getState().pagination.pageIndex + 1\n    : (controlledPagination?.page ?? 1);\n  let pageSize =\n    clientPagination ?\n      table.getState().pagination.pageSize\n    : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n  let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n  let toggleFilters = useCallback(() => {\n    setShowFilters((value) => !value);\n  }, []);\n\n  let handleRowClick = useCallback((row: Row<D>) => {\n    setRowSummaryRow(row);\n    setShowRowSummary(true);\n  }, []);\n\n  let handleCloseRowDialog = useCallback(() => {\n    setShowRowSummary(false);\n  }, []);\n\n  return (\n    <div\n      className=\"group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]\"\n      data-show-filters={showFilters || undefined}\n    >\n      <div className=\"flex flex-col gap-2\">\n        {hideSearch ? null : (\n          <DataTableSearchComponent\n            clientSearch={clientSearch}\n            search={controlledSearch}\n            table={table}\n            onSearch={onSearchChange}\n          />\n        )}\n        {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (\n          <DataTableMenu\n            hideColumnOrder={hideColumnOrder}\n            hideColumnPinning={hideColumnPinning}\n            hideColumnVisibility={hideColumnVisibility}\n            hideFilters={hideFilters}\n            table={table}\n            toggleFilters={toggleFilters}\n          />\n        )}\n      </div>\n      {hideFilters ? null : (\n        <DataTableFiltersComponent\n          clientFaceting={clientFaceting}\n          clientFilters={clientFilters}\n          faceting={faceting}\n          filters={controlledFilters}\n          table={table}\n          onFiltering={onFiltersChange}\n        />\n      )}\n      <div className=\"w-full [scrollbar-width:thin] overflow-x-scroll overflow-y-visible\">\n        <Table\n          style={{\n            width: table.getCenterTotalSize(),\n            tableLayout: 'fixed',\n          }}\n        >\n          <TableHead>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n                  {headerGroup.headers.map((header) => (\n                    <DataTableHeader\n                      key={header.id}\n                      clientSorting={clientSorting}\n                      header={header}\n                      hideColumnOrder={hideColumnOrder}\n                      hideColumnResizing={hideColumnResizing}\n                      hideSorting={hideSorting}\n                      sorting={controlledSorting}\n                      onSorting={onSortingChange}\n                    />\n                  ))}\n                </SortableContext>\n              </TableRow>\n            ))}\n          </TableHead>\n          <TableBody>\n            {table.getRowModel().rows.map((row) => (\n              <DataTableRow\n                key={row.id}\n                row={row}\n                onClick={showRowSummaryOnClick ? handleRowClick : undefined}\n              />\n            ))}\n          </TableBody>\n          <TableFoot>\n            {table.getFooterGroups().map((footerGroup) => (\n              <TableRow key={footerGroup.id}>\n                {footerGroup.headers.map((header) => (\n                  <TableHeader key={header.id}>\n                    {header.isPlaceholder ? null : (\n                      flexRender(header.column.columnDef.footer, header.getContext())\n                    )}\n                  </TableHeader>\n                ))}\n              </TableRow>\n            ))}\n          </TableFoot>\n        </Table>\n      </div>\n      {hidePagination ? null : (\n        <DataTablePaginationComponent\n          clientPagination={clientPagination}\n          page={page}\n          pageCount={pageCount}\n          pageSize={pageSize}\n          table={table}\n          onPagination={onPaginationChange}\n        />\n      )}\n      {showRowSummaryOnClick ?\n        <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>\n          <DialogPanel className=\"flex flex-col gap-4\">\n            {rowSummaryRow ?\n              <Table className=\"w-full\">\n                <TableBody>\n                  {rowSummaryRow.getVisibleCells().map((cell) => (\n                    <TableRow key={cell.id}>\n                      <TableHeader className=\"px-4\">\n                        {flexRender(cell.column.columnDef.header, {\n                          table,\n                          column: cell.column,\n                          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n                          header: {column: cell.column} as Header<any, any>,\n                        })}\n                      </TableHeader>\n                      <TableCell className=\"overflow-visible whitespace-normal\">\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            : null}\n            <Container align=\"center\" direction=\"column\">\n              <Button className=\"self-center\" onClick={handleCloseRowDialog}>\n                Close\n              </Button>\n            </Container>\n          </DialogPanel>\n        </Dialog>\n      : null}\n    </div>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build/components/data-table/internals/fuzzyFilter.js

@@ -1,6 +1,10 @@
-import { rankItem } from "@tanstack/match-sorter-utils";
+import { rankings, rankItem } from "@tanstack/match-sorter-utils";
 export function fuzzyFilter(row, columnId, value, addMeta) {
-  let itemRank = rankItem(row.getValue(columnId), value, {});
+  let cellValue = row.getValue(columnId);
+  if (cellValue === void 0 || cellValue === null) {
+    return false;
+  }
+  let itemRank = rankItem(cellValue, value, { threshold: rankings.CONTAINS });
   addMeta({ itemRank });
   return itemRank.passed;
 }

package/build/components/data-table/internals/fuzzyFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../source/components/data-table/internals/fuzzyFilter.ts"],
-  "sourcesContent": ["import {rankItem} from '@tanstack/match-sorter-utils';\nimport {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';\n\nexport function fuzzyFilter<TData extends RowData>(\n  row: Row<TData>,\n  columnId: string,\n  value: unknown,\n  addMeta: (meta: FilterMeta) => void,\n) {\n  let itemRank = rankItem(row.getValue(columnId), value as string, {});\n\n  addMeta({itemRank});\n\n  return itemRank.passed;\n}\n"],
-  "mappings": "AAAA,SAAQ,gBAAe;AAGhB,gBAAS,YACd,KACA,UACA,OACA,SACA;AACA,MAAI,WAAW,SAAS,IAAI,SAAS,QAAQ,GAAG,OAAiB,CAAC,CAAC;AAEnE,UAAQ,EAAC,SAAQ,CAAC;AAElB,SAAO,SAAS;AAClB;",
+  "sourcesContent": ["import {rankings, rankItem} from '@tanstack/match-sorter-utils';\nimport {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';\n\nexport function fuzzyFilter<TData extends RowData>(\n  row: Row<TData>,\n  columnId: string,\n  value: unknown,\n  addMeta: (meta: FilterMeta) => void,\n) {\n  let cellValue = row.getValue(columnId);\n\n  if (cellValue === undefined || cellValue === null) {\n    return false;\n  }\n\n  let itemRank = rankItem(cellValue, value as string, {threshold: rankings.CONTAINS});\n\n  addMeta({itemRank});\n\n  return itemRank.passed;\n}\n"],
+  "mappings": "AAAA,SAAQ,UAAU,gBAAe;AAG1B,gBAAS,YACd,KACA,UACA,OACA,SACA;AACA,MAAI,YAAY,IAAI,SAAS,QAAQ;AAErC,MAAI,cAAc,UAAa,cAAc,MAAM;AACjD,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,SAAS,WAAW,OAAiB,EAAC,WAAW,SAAS,SAAQ,CAAC;AAElF,UAAQ,EAAC,SAAQ,CAAC;AAElB,SAAO,SAAS;AAClB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakubmazanec/ui",
-  "version": "0.6.1-next.4df71cb5",
+  "version": "0.6.1-next.ce79adcb",
   "description": "React component library.",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.10",
     "@heroicons/react": "^2.2.0",
-    "@jakubmazanec/ts-utils": "3.0.20-next.4df71cb5",
+    "@jakubmazanec/ts-utils": "3.0.20-next.ce79adcb",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "culori": "^4.0.2",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.4.0",
-    "@jakubmazanec/eslint-config": "5.0.1-next.4df71cb5",
+    "@jakubmazanec/eslint-config": "5.0.1-next.ce79adcb",
     "@storybook/addon-docs": "^10.6.1",
     "@storybook/addon-links": "^10.6.1",
     "@storybook/react-vite": "^10.6.1",

package/source/components/data-table/DataTable.tsx

@@ -267,6 +267,7 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
     onGlobalFilterChange: clientSearch ? setSearch : undefined,
     columnResizeMode: 'onChange',
     globalFilterFn: fuzzyFilter,
+    getColumnCanGlobalFilter: () => true,
   });
 
   let page =

package/source/components/data-table/internals/fuzzyFilter.ts

@@ -1,4 +1,4 @@
-import {rankItem} from '@tanstack/match-sorter-utils';
+import {rankings, rankItem} from '@tanstack/match-sorter-utils';
 import {type FilterMeta, type Row, type RowData} from '@tanstack/react-table';
 
 export function fuzzyFilter<TData extends RowData>(
@@ -7,7 +7,13 @@ export function fuzzyFilter<TData extends RowData>(
   value: unknown,
   addMeta: (meta: FilterMeta) => void,
 ) {
-  let itemRank = rankItem(row.getValue(columnId), value as string, {});
+  let cellValue = row.getValue(columnId);
+
+  if (cellValue === undefined || cellValue === null) {
+    return false;
+  }
+
+  let itemRank = rankItem(cellValue, value as string, {threshold: rankings.CONTAINS});
 
   addMeta({itemRank});