pallote-react 0.16.7 → 0.16.9

package/dist/components/DataTable.d.ts

@@ -1,14 +1,21 @@
 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;
 }
 export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     data: TData[];
@@ -22,5 +29,6 @@ export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElemen
     dense?: boolean;
     border?: boolean;
     className?: string;
+    kind?: TableCellKind;
 }
-export declare function DataTable<TData extends Record<string, unknown>>({ data, columns: columnDefs, enableSearch, searchPlaceholder, pageSize: initialPageSize, pageSizeOptions, striped, hasHover, dense, border, className, ...props }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends Record<string, unknown>>({ data, columns: columnDefs, enableSearch, searchPlaceholder, pageSize: initialPageSize, pageSizeOptions, striped, hasHover, dense, border, kind: defaultKind, className, ...props }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableCell.d.ts

@@ -1,9 +1,8 @@
 import { TdHTMLAttributes, ReactNode } from 'react';
-type TableCellKind = 'default' | 'number' | 'action';
+export type TableCellKind = 'default' | 'number' | 'action';
 export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     kind?: TableCellKind;
     className?: string;
     children?: ReactNode;
 }
 export declare const TableCell: ({ kind, className, children, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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';
@@ -92,7 +92,7 @@ export type { SwitchProps } from './components/Switch';
 export type { TabProps } from './components/Tab';
 export type { TableProps } from './components/Table';
 export type { TableBodyProps } from './components/TableBody';
-export type { TableCellProps } from './components/TableCell';
+export type { TableCellProps, TableCellKind } from './components/TableCell';
 export type { TablePaginationProps } from './components/TablePagination';
 export type { TableHeadProps } from './components/TableHead';
 export type { TableRowProps } from './components/TableRow';

package/dist/index.js

@@ -790,17 +790,21 @@ 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) }));
 }
-function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, className, ...props }) {
+function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, kind: defaultKind, className, ...props }) {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
@@ -816,6 +820,7 @@ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder
             filterType: col.filterType ?? 'text',
             filterOptions: col.filterOptions,
             className: col.className,
+            kind: col.kind,
         },
     })), [columnDefs]);
     const table = useReactTable({
@@ -836,17 +841,20 @@ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder
     const hasFilters = columnDefs.some(col => col.enableFiltering === true);
     return (jsxs("div", { className: classnames('datatable', className), ...props, children: [enableSearch && (jsx("div", { className: "datatable_search", children: jsx(Input, { id: "datatable-search", label: "Search", hideLabel: true, placeholder: searchPlaceholder, icon: jsx(MagnifyingGlassIcon, {}), value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxs(Table, { striped: striped, hasHover: hasHover, dense: dense, border: border, children: [jsxs(TableHead, { children: [table.getHeaderGroups().map(headerGroup => (jsx(TableRow, { children: headerGroup.headers.map(header => {
                                     const meta = header.column.columnDef.meta;
-                                    return (jsx(TableCell, { className: classnames(meta?.className, {
+                                    const cellKind = meta?.kind ?? defaultKind ?? 'default';
+                                    return (jsx(TableCell, { kind: cellKind, className: classnames(meta?.className, {
                                             'datatable_sortable': header.column.getCanSort()
                                         }), onClick: header.column.getToggleSortingHandler(), "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending'
                                             : header.column.getIsSorted() === 'desc' ? 'descending'
                                                 : undefined, children: jsxs("span", { className: "datatable_headerContent", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "datatable_sortIcon", "aria-hidden": "true", children: header.column.getIsSorted() === 'asc' ? (jsx(CaretDownIcon, { size: 12 })) : header.column.getIsSorted() === 'desc' ? (jsx(CaretUpIcon, { size: 12 })) : (jsx(CaretDownIcon, { size: 12, className: "datatable_sortIcon-inactive" })) }))] }) }, header.id));
                                 }) }, headerGroup.id))), hasFilters && (jsx(TableRow, { className: "datatable_filterRow", children: table.getHeaderGroups()[0].headers.map(header => {
                                     const meta = header.column.columnDef.meta;
-                                    return (jsx(TableCell, { className: meta?.className, children: header.column.getCanFilter() ? (jsx(ColumnFilter, { header: header })) : null }, `filter-${header.id}`));
+                                    const cellKind = meta?.kind ?? defaultKind ?? 'default';
+                                    return (jsx(TableCell, { kind: cellKind, className: meta?.className, children: header.column.getCanFilter() ? (jsx(ColumnFilter, { header: header })) : null }, `filter-${header.id}`));
                                 }) }))] }), jsx(TableBody, { children: table.getRowModel().rows.length === 0 ? (jsx(TableRow, { children: jsx(TableCell, { colSpan: columnDefs.length, className: "datatable_empty", children: "No results found" }) })) : (table.getRowModel().rows.map(row => (jsx(TableRow, { children: row.getVisibleCells().map(cell => {
                                 const meta = cell.column.columnDef.meta;
-                                return (jsx(TableCell, { className: meta?.className, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                const cellKind = meta?.kind ?? defaultKind ?? 'default';
+                                return (jsx(TableCell, { kind: cellKind, className: meta?.className, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                             }) }, row.id)))) })] }), jsx(TablePagination, { pageIndex: table.getState().pagination.pageIndex, pageCount: table.getPageCount(), pageSize: table.getState().pagination.pageSize, pageSizeOptions: pageSizeOptions, totalRows: table.getFilteredRowModel().rows.length, onPageChange: (page) => table.setPageIndex(page), onPageSizeChange: (size) => table.setPageSize(size) })] }));
 }
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.7",
+  "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.7",
+  "version": "0.16.9",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",