pallote-react 0.16.8 → 0.16.9

package/dist/components/DataTable.d.ts

@@ -1,13 +1,18 @@
 import { ReactNode, HTMLAttributes } from 'react';
 import { type TableCellKind } from './TableCell';
 export type DataTableFilterType = 'text' | 'select';
+/** Option value for filtering; label is shown in the dropdown. Use when row values are raw (e.g. in_progress) but you want formatted labels (e.g. In progress). */
+export type DataTableFilterOption = string | {
+    value: string;
+    label: string;
+};
 export interface DataTableColumnDef<TData> {
     accessorKey: keyof TData & string;
     header: string;
     enableSorting?: boolean;
     enableFiltering?: boolean;
     filterType?: DataTableFilterType;
-    filterOptions?: string[];
+    filterOptions?: DataTableFilterOption[];
     cell?: (value: TData[keyof TData & string], row: TData) => ReactNode;
     className?: string;
     kind?: TableCellKind;

package/dist/index.d.ts

@@ -68,7 +68,7 @@ export type { CardMediaProps } from './components/CardMedia';
 export type { CheckboxProps } from './components/Checkbox';
 export type { CheckboxesProps } from './components/Checkboxes';
 export type { ChipProps } from './components/Chip';
-export type { DataTableProps, DataTableColumnDef, DataTableFilterType } from './components/DataTable';
+export type { DataTableProps, DataTableColumnDef, DataTableFilterType, DataTableFilterOption } from './components/DataTable';
 export type { DividerProps } from './components/Divider';
 export type { InputProps } from './components/Input';
 export type { InputLabelProps } from './components/InputLabel';

package/dist/index.js

@@ -790,13 +790,17 @@ const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon
                     : null), ...props })] }));
 };
 
+function normalizeFilterOption(opt) {
+    return typeof opt === 'string' ? { value: opt, label: opt } : opt;
+}
 function ColumnFilter({ header }) {
     const columnDef = header.column.columnDef.meta;
     const filterType = columnDef?.filterType ?? 'text';
     const filterOptions = columnDef?.filterOptions ?? [];
     const filterValue = header.column.getFilterValue() ?? '';
     if (filterType === 'select') {
-        return (jsxs(Select, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined), children: [jsx("option", { value: "", children: "All" }), filterOptions.map(opt => (jsx("option", { value: opt, children: opt }, opt)))] }));
+        const options = filterOptions.map(normalizeFilterOption);
+        return (jsxs(Select, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined), children: [jsx("option", { value: "", children: "All" }), options.map(({ value, label }) => (jsx("option", { value: value, children: label }, value)))] }));
     }
     return (jsx(Input, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, placeholder: "Filter...", className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined) }));
 }

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.8",
+  "version": "0.16.9",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.8",
+  "version": "0.16.9",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",