pallote-react 0.16.7 → 0.16.8

package/dist/components/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, HTMLAttributes } from 'react';
+import { type TableCellKind } from './TableCell';
 export type DataTableFilterType = 'text' | 'select';
 export interface DataTableColumnDef<TData> {
     accessorKey: keyof TData & string;
@@ -9,6 +10,7 @@ export interface DataTableColumnDef<TData> {
     filterOptions?: string[];
     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 +24,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

@@ -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

@@ -800,7 +800,7 @@ function ColumnFilter({ header }) {
     }
     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 +816,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 +837,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.8",
   "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.8",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",