@rafal.lemieszewski/tide-ui 0.18.0 → 0.19.0
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/ui/data-table.d.ts +62 -5
- package/dist/components/ui/table.d.ts +8 -0
- package/dist/index.cjs.js +1713 -1709
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +28331 -24602
- package/dist/index.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import { ColumnDef, FilterFn } from '@tanstack/react-table';
|
|
1
|
+
import { ColumnDef, ExpandedState, GroupingState, FilterFn, ColumnResizeMode } from '@tanstack/react-table';
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
export type FilterVariant = "text" | "select" | "multiselect" | "number" | "date" | "boolean";
|
|
4
|
+
export interface NestedHeaderConfig {
|
|
5
|
+
id: string;
|
|
6
|
+
header: string | React.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
columns: ColumnDef<any, any>[];
|
|
10
|
+
}
|
|
4
11
|
export interface ColumnMeta {
|
|
5
12
|
label?: string;
|
|
6
13
|
filterVariant?: FilterVariant;
|
|
@@ -17,19 +24,31 @@ declare const multiSelectFilter: FilterFn<any>;
|
|
|
17
24
|
interface DataTableSkeletonProps {
|
|
18
25
|
columns: number;
|
|
19
26
|
rows: number;
|
|
27
|
+
showRowBorder?: boolean;
|
|
28
|
+
showCellBorder?: boolean;
|
|
20
29
|
}
|
|
21
|
-
declare function DataTableSkeleton({ columns, rows }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
declare function DataTableSkeleton({ columns, rows, showRowBorder, showCellBorder }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
22
31
|
interface DataTableToolbarProps<_TData = any> {
|
|
23
32
|
table: any;
|
|
24
33
|
searchKey?: string;
|
|
25
34
|
searchPlaceholder?: string;
|
|
26
35
|
showViewOptions?: boolean;
|
|
36
|
+
enableGlobalSearch?: boolean;
|
|
37
|
+
globalSearchPlaceholder?: string;
|
|
38
|
+
globalFilter?: string;
|
|
39
|
+
onGlobalFilterChange?: (value: string) => void;
|
|
40
|
+
enableGlobalFaceting?: boolean;
|
|
41
|
+
enableGrouping?: boolean;
|
|
27
42
|
}
|
|
28
|
-
declare function DataTableToolbar<TData>({ table, searchKey, searchPlaceholder, showViewOptions }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
declare function DataTableToolbar<TData>({ table, searchKey, searchPlaceholder, showViewOptions, enableGlobalSearch, globalSearchPlaceholder, globalFilter, onGlobalFilterChange, enableGlobalFaceting, enableGrouping }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
29
44
|
interface DataTableFilterProps {
|
|
30
45
|
column: any;
|
|
31
46
|
}
|
|
32
47
|
declare function DataTableFilter({ column }: DataTableFilterProps): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
interface DataTableViewOptionsProps<_TData = any> {
|
|
49
|
+
table: any;
|
|
50
|
+
}
|
|
51
|
+
declare function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
33
52
|
interface DataTableColumnHeaderProps<_TData = any, _TValue = any> extends React.HTMLAttributes<HTMLDivElement> {
|
|
34
53
|
column: any;
|
|
35
54
|
title: string;
|
|
@@ -39,6 +58,7 @@ interface DataTablePaginationProps<_TData = any> {
|
|
|
39
58
|
table: any;
|
|
40
59
|
}
|
|
41
60
|
declare function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
61
|
+
export type BorderStyle = "vertical" | "horizontal" | "both" | "none";
|
|
42
62
|
export interface DataTableProps<TData, TValue> {
|
|
43
63
|
columns: ColumnDef<TData, TValue>[];
|
|
44
64
|
data: TData[];
|
|
@@ -54,6 +74,43 @@ export interface DataTableProps<TData, TValue> {
|
|
|
54
74
|
showScrollIndicators?: boolean;
|
|
55
75
|
isLoading?: boolean;
|
|
56
76
|
loadingRowCount?: number;
|
|
77
|
+
borderStyle?: BorderStyle;
|
|
78
|
+
enableGlobalSearch?: boolean;
|
|
79
|
+
enableGlobalFaceting?: boolean;
|
|
80
|
+
enableColumnResizing?: boolean;
|
|
81
|
+
columnResizeMode?: ColumnResizeMode;
|
|
82
|
+
enableColumnResizePersistence?: boolean;
|
|
83
|
+
storageKey?: string;
|
|
84
|
+
globalSearchPlaceholder?: string;
|
|
85
|
+
enableExpanding?: boolean;
|
|
86
|
+
getSubRows?: (row: TData) => TData[] | undefined;
|
|
87
|
+
enableGrouping?: boolean;
|
|
88
|
+
groupedColumnMode?: 'reorder' | 'remove' | false;
|
|
89
|
+
enableManualGrouping?: boolean;
|
|
90
|
+
enableRowPinning?: boolean;
|
|
91
|
+
keepPinnedRows?: boolean;
|
|
92
|
+
enableVirtualization?: boolean;
|
|
93
|
+
virtualContainerHeight?: number;
|
|
94
|
+
virtualRowHeight?: number;
|
|
95
|
+
virtualOverscan?: number;
|
|
96
|
+
nestedHeaders?: NestedHeaderConfig[];
|
|
97
|
+
enableNestedHeaders?: boolean;
|
|
98
|
+
enableColumnOrdering?: boolean;
|
|
99
|
+
enableRowSelection?: boolean;
|
|
100
|
+
showHeader?: boolean;
|
|
101
|
+
showPagination?: boolean;
|
|
102
|
+
onTableReady?: (table: any) => void;
|
|
103
|
+
initialState?: {
|
|
104
|
+
grouping?: GroupingState;
|
|
105
|
+
expanded?: ExpandedState;
|
|
106
|
+
columnSizing?: Record<string, number>;
|
|
107
|
+
rowPinning?: {
|
|
108
|
+
top?: string[];
|
|
109
|
+
bottom?: string[];
|
|
110
|
+
};
|
|
111
|
+
};
|
|
57
112
|
}
|
|
58
|
-
export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, title, className, stickyHeader, stickyFirstColumn, stickyLeftColumns, stickyRightColumns, enableResponsiveWrapper, showScrollIndicators, isLoading, loadingRowCount, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
59
|
-
export { DataTableColumnHeader, DataTableFilter, DataTableToolbar, DataTablePagination, DataTableSkeleton, fuzzyFilter, multiSelectFilter };
|
|
113
|
+
export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, title, className, stickyHeader, stickyFirstColumn, stickyLeftColumns, stickyRightColumns, enableResponsiveWrapper, showScrollIndicators, isLoading, loadingRowCount, borderStyle, enableGlobalSearch, globalSearchPlaceholder, enableGlobalFaceting, enableColumnResizing, columnResizeMode, enableColumnResizePersistence, storageKey, enableExpanding, getSubRows, enableGrouping, groupedColumnMode, enableManualGrouping, enableRowPinning, keepPinnedRows, enableVirtualization, nestedHeaders, enableNestedHeaders, enableColumnOrdering, enableRowSelection, showHeader, showPagination, onTableReady, initialState, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
114
|
+
export { DataTableColumnHeader, DataTableFilter, DataTableToolbar, DataTablePagination, DataTableSkeleton, DataTableViewOptions, fuzzyFilter, multiSelectFilter };
|
|
115
|
+
export { useReactTable } from '@tanstack/react-table';
|
|
116
|
+
export type { SortingState, ColumnFiltersState, VisibilityState, ExpandedState, GroupingState, ColumnOrderState, FilterFn, ColumnResizeMode, } from '@tanstack/react-table';
|
|
@@ -5,16 +5,20 @@ declare const tableVariants: (props?: ({
|
|
|
5
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
6
|
declare const tableRowVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "selected" | "zebra" | null | undefined;
|
|
8
|
+
showBorder?: boolean | null | undefined;
|
|
8
9
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
10
|
declare const tableCellVariants: (props?: ({
|
|
10
11
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
11
12
|
align?: "left" | "right" | "center" | null | undefined;
|
|
12
13
|
numeric?: boolean | null | undefined;
|
|
14
|
+
showBorder?: boolean | null | undefined;
|
|
15
|
+
showRowBorder?: boolean | null | undefined;
|
|
13
16
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
14
17
|
declare const tableHeaderVariants: (props?: ({
|
|
15
18
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
16
19
|
align?: "left" | "right" | "center" | null | undefined;
|
|
17
20
|
numeric?: boolean | null | undefined;
|
|
21
|
+
showBorder?: boolean | null | undefined;
|
|
18
22
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
19
23
|
interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
|
|
20
24
|
}
|
|
@@ -25,12 +29,16 @@ declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<
|
|
|
25
29
|
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>, VariantProps<typeof tableRowVariants> {
|
|
26
30
|
zebra?: boolean;
|
|
27
31
|
zebraIndex?: number;
|
|
32
|
+
showBorder?: boolean;
|
|
28
33
|
}
|
|
29
34
|
declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
30
35
|
interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'>, VariantProps<typeof tableHeaderVariants> {
|
|
36
|
+
showBorder?: boolean;
|
|
31
37
|
}
|
|
32
38
|
declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
33
39
|
interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'>, VariantProps<typeof tableCellVariants> {
|
|
40
|
+
showBorder?: boolean;
|
|
41
|
+
showRowBorder?: boolean;
|
|
34
42
|
}
|
|
35
43
|
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
36
44
|
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
|