pallote-react 0.16.4 → 0.16.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DataTable.d.ts +1 -0
- package/dist/index.js +15 -5
- package/dist/package.json +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ export interface DataTableColumnDef<TData> {
|
|
|
8
8
|
filterType?: DataTableFilterType;
|
|
9
9
|
filterOptions?: string[];
|
|
10
10
|
cell?: (value: TData[keyof TData & string], row: TData) => ReactNode;
|
|
11
|
+
className?: string;
|
|
11
12
|
}
|
|
12
13
|
export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
13
14
|
data: TData[];
|
package/dist/index.js
CHANGED
|
@@ -815,6 +815,7 @@ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder
|
|
|
815
815
|
meta: {
|
|
816
816
|
filterType: col.filterType ?? 'text',
|
|
817
817
|
filterOptions: col.filterOptions,
|
|
818
|
+
className: col.className,
|
|
818
819
|
},
|
|
819
820
|
})), [columnDefs]);
|
|
820
821
|
const table = useReactTable({
|
|
@@ -833,11 +834,20 @@ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder
|
|
|
833
834
|
},
|
|
834
835
|
});
|
|
835
836
|
const hasFilters = columnDefs.some(col => col.enableFiltering === true);
|
|
836
|
-
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 =>
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
837
|
+
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 => {
|
|
838
|
+
const meta = header.column.columnDef.meta;
|
|
839
|
+
return (jsx(TableCell, { className: classnames(meta?.className, {
|
|
840
|
+
'datatable_sortable': header.column.getCanSort()
|
|
841
|
+
}), onClick: header.column.getToggleSortingHandler(), "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending'
|
|
842
|
+
: header.column.getIsSorted() === 'desc' ? 'descending'
|
|
843
|
+
: 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));
|
|
844
|
+
}) }, headerGroup.id))), hasFilters && (jsx(TableRow, { className: "datatable_filterRow", children: table.getHeaderGroups()[0].headers.map(header => {
|
|
845
|
+
const meta = header.column.columnDef.meta;
|
|
846
|
+
return (jsx(TableCell, { className: meta?.className, children: header.column.getCanFilter() ? (jsx(ColumnFilter, { header: header })) : null }, `filter-${header.id}`));
|
|
847
|
+
}) }))] }), 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 => {
|
|
848
|
+
const meta = cell.column.columnDef.meta;
|
|
849
|
+
return (jsx(TableCell, { className: meta?.className, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
850
|
+
}) }, 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) })] }));
|
|
841
851
|
}
|
|
842
852
|
|
|
843
853
|
const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {
|
package/dist/package.json
CHANGED