luxtable 0.3.5 → 0.3.6
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/EXAMPLE.md +348 -348
- package/README.md +179 -41
- package/USAGE.md +823 -631
- package/dist/index.d.mts +149 -23
- package/dist/index.d.ts +149 -23
- package/dist/index.js +1557 -742
- package/dist/index.mjs +1540 -728
- package/package.json +4 -1
- package/src/styles/README.md +141 -0
- package/src/styles/variables.css +283 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ColumnDef, SortingState, RowSelectionState, Column, Table as Table$1, HeaderContext
|
|
2
|
+
import { CellContext, ColumnDef, SortingState, RowSelectionState, Column, Table as Table$1, HeaderContext } from '@tanstack/react-table';
|
|
3
3
|
export { ColumnDef, RowSelectionState, SortingState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
|
|
4
4
|
import * as React$1 from 'react';
|
|
5
5
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
@@ -12,6 +12,133 @@ import * as SelectPrimitive from '@radix-ui/react-select';
|
|
|
12
12
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
13
13
|
import { ClassValue } from 'clsx';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Cell renderer tipi
|
|
17
|
+
*/
|
|
18
|
+
type CellRendererType = "status" | "progress" | "boolean" | "date" | "currency" | "copyable" | "custom";
|
|
19
|
+
/**
|
|
20
|
+
* Status cell config
|
|
21
|
+
*/
|
|
22
|
+
interface StatusCellConfig {
|
|
23
|
+
type: "status";
|
|
24
|
+
/** Custom status colors - default status'leri override eder veya üzerine ekler */
|
|
25
|
+
colors?: Record<string, {
|
|
26
|
+
bg: string;
|
|
27
|
+
text: string;
|
|
28
|
+
darkBg?: string;
|
|
29
|
+
darkText?: string;
|
|
30
|
+
}>;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Progress cell config
|
|
34
|
+
*/
|
|
35
|
+
interface ProgressCellConfig {
|
|
36
|
+
type: "progress";
|
|
37
|
+
/** Bar color */
|
|
38
|
+
barColor?: string;
|
|
39
|
+
/** Show percentage label */
|
|
40
|
+
showLabel?: boolean;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Boolean cell config
|
|
44
|
+
*/
|
|
45
|
+
interface BooleanCellConfig {
|
|
46
|
+
type: "boolean";
|
|
47
|
+
/** True label */
|
|
48
|
+
trueLabel?: string;
|
|
49
|
+
/** False label */
|
|
50
|
+
falseLabel?: string;
|
|
51
|
+
/** True color classes */
|
|
52
|
+
trueColor?: string;
|
|
53
|
+
/** False color classes */
|
|
54
|
+
falseColor?: string;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Date cell config
|
|
58
|
+
*/
|
|
59
|
+
interface DateCellConfig {
|
|
60
|
+
type: "date";
|
|
61
|
+
/** Date format */
|
|
62
|
+
format?: "short" | "long" | "relative";
|
|
63
|
+
/** Locale */
|
|
64
|
+
locale?: string;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Currency cell config
|
|
68
|
+
*/
|
|
69
|
+
interface CurrencyCellConfig {
|
|
70
|
+
type: "currency";
|
|
71
|
+
/** Currency code (e.g., "USD", "EUR") */
|
|
72
|
+
currency?: string;
|
|
73
|
+
/** Locale */
|
|
74
|
+
locale?: string;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Copyable cell config
|
|
78
|
+
*/
|
|
79
|
+
interface CopyableCellConfig {
|
|
80
|
+
type: "copyable";
|
|
81
|
+
/** Always show icon */
|
|
82
|
+
alwaysShowIcon?: boolean;
|
|
83
|
+
/** Tooltip text */
|
|
84
|
+
tooltip?: string;
|
|
85
|
+
/** Callback called after copying */
|
|
86
|
+
onCopy?: (value: string) => void;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Custom cell config
|
|
90
|
+
*/
|
|
91
|
+
interface CustomCellConfig {
|
|
92
|
+
type: "custom";
|
|
93
|
+
/** Custom renderer function */
|
|
94
|
+
render: (context: CellContext<any, unknown>) => React$1.ReactNode;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Field cell config - her field için cell renderer tanımı
|
|
98
|
+
*/
|
|
99
|
+
type FieldCellConfig = StatusCellConfig | ProgressCellConfig | BooleanCellConfig | DateCellConfig | CurrencyCellConfig | CopyableCellConfig | CustomCellConfig;
|
|
100
|
+
/**
|
|
101
|
+
* Global cell config - field bazlı cell renderer'ları tanımlar
|
|
102
|
+
*/
|
|
103
|
+
interface GlobalCellConfig {
|
|
104
|
+
/** Field bazlı cell config'leri - field adı -> config */
|
|
105
|
+
fields?: Record<string, FieldCellConfig>;
|
|
106
|
+
/** Default status colors - tüm status field'ları için geçerli */
|
|
107
|
+
defaultStatusColors?: Record<string, {
|
|
108
|
+
bg: string;
|
|
109
|
+
text: string;
|
|
110
|
+
darkBg?: string;
|
|
111
|
+
darkText?: string;
|
|
112
|
+
}>;
|
|
113
|
+
/** Auto-detect field types from field names and values (default: true) */
|
|
114
|
+
autoDetect?: boolean;
|
|
115
|
+
/** Field name patterns for auto-detection */
|
|
116
|
+
patterns?: {
|
|
117
|
+
/** Field names that should be treated as status (default: ['status', 'state', 'stage']) */
|
|
118
|
+
status?: string[];
|
|
119
|
+
/** Field names that should be treated as date (default: ['date', 'createdAt', 'updatedAt', 'joinDate', 'startDate', 'endDate']) */
|
|
120
|
+
date?: string[];
|
|
121
|
+
/** Field names that should be treated as currency (default: ['price', 'amount', 'salary', 'cost', 'revenue', 'total']) */
|
|
122
|
+
currency?: string[];
|
|
123
|
+
/** Field names that should be treated as boolean (default: ['isActive', 'isVerified', 'isEnabled', 'isDeleted']) */
|
|
124
|
+
boolean?: string[];
|
|
125
|
+
/** Field names that should be treated as copyable (default: ['id', 'email', 'phone', 'code', 'token']) */
|
|
126
|
+
copyable?: string[];
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Get field config with auto-detection
|
|
131
|
+
*/
|
|
132
|
+
declare function getFieldConfig(fieldName: string, value: unknown, config?: GlobalCellConfig): FieldCellConfig | null;
|
|
133
|
+
/**
|
|
134
|
+
* Default global cell config
|
|
135
|
+
*/
|
|
136
|
+
declare const defaultGlobalCellConfig: GlobalCellConfig;
|
|
137
|
+
/**
|
|
138
|
+
* Cell renderer'ı çalıştırır
|
|
139
|
+
*/
|
|
140
|
+
declare function renderCell<TData>(context: CellContext<TData, unknown>, fieldName: string, config?: GlobalCellConfig): React$1.ReactNode;
|
|
141
|
+
|
|
15
142
|
/**
|
|
16
143
|
* All type definitions for LuxTable
|
|
17
144
|
*/
|
|
@@ -40,14 +167,16 @@ interface LuxTableOptions {
|
|
|
40
167
|
showColumnVisibility?: boolean;
|
|
41
168
|
}
|
|
42
169
|
interface LuxTableProps<TData> {
|
|
43
|
-
/** Column definitions */
|
|
44
|
-
columns
|
|
170
|
+
/** Column definitions - if not provided, columns will be auto-generated from data */
|
|
171
|
+
columns?: ColumnDef<TData, any>[];
|
|
45
172
|
/** Table data */
|
|
46
173
|
data: TData[];
|
|
47
174
|
/** Additional CSS classes */
|
|
48
175
|
className?: string;
|
|
49
176
|
/** Table options */
|
|
50
177
|
options?: LuxTableOptions;
|
|
178
|
+
/** Global cell config - field bazlı otomatik cell renderer'ları tanımlar */
|
|
179
|
+
cellConfig?: GlobalCellConfig;
|
|
51
180
|
/** Controlled sorting state */
|
|
52
181
|
sorting?: SortingState;
|
|
53
182
|
/** Called when sorting changes */
|
|
@@ -66,8 +195,8 @@ interface LuxTableProps<TData> {
|
|
|
66
195
|
* Can be used in the meta field in column definitions
|
|
67
196
|
*/
|
|
68
197
|
interface ColumnMeta {
|
|
69
|
-
/** Filter type: text or
|
|
70
|
-
filterVariant?: "text" | "select";
|
|
198
|
+
/** Filter type: text, select, date, slider, or status */
|
|
199
|
+
filterVariant?: "text" | "select" | "date" | "slider" | "status";
|
|
71
200
|
}
|
|
72
201
|
/**
|
|
73
202
|
* Pagination information
|
|
@@ -111,21 +240,22 @@ interface PaginationInfo {
|
|
|
111
240
|
* />
|
|
112
241
|
* ```
|
|
113
242
|
*/
|
|
114
|
-
declare function LuxTable<TData>({ columns, data, className, options, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, onSelectedRowsChange, getRowId, }: LuxTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
243
|
+
declare function LuxTable<TData>({ columns, data, className, options, cellConfig, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, onSelectedRowsChange, getRowId, }: LuxTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
115
244
|
|
|
116
245
|
interface ColumnFilterProps<TData, TValue> {
|
|
117
246
|
column: Column<TData, TValue>;
|
|
247
|
+
data?: TData[];
|
|
118
248
|
}
|
|
119
249
|
/**
|
|
120
250
|
* Column filter component
|
|
121
|
-
*
|
|
251
|
+
* Supports multiple filter types: text, select, date, slider, status
|
|
122
252
|
*
|
|
123
253
|
* @example
|
|
124
254
|
* ```tsx
|
|
125
|
-
* <ColumnFilter column={column} />
|
|
255
|
+
* <ColumnFilter column={column} data={data} />
|
|
126
256
|
* ```
|
|
127
257
|
*/
|
|
128
|
-
declare function ColumnFilter<TData, TValue>({ column }: ColumnFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
258
|
+
declare function ColumnFilter<TData, TValue>({ column, data }: ColumnFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
129
259
|
|
|
130
260
|
interface TablePaginationProps<TData> {
|
|
131
261
|
table: Table$1<TData>;
|
|
@@ -191,15 +321,6 @@ interface SortIconProps {
|
|
|
191
321
|
*/
|
|
192
322
|
declare function SortIcon({ direction }: SortIconProps): react_jsx_runtime.JSX.Element;
|
|
193
323
|
|
|
194
|
-
/**
|
|
195
|
-
* Default colors for Status Cell
|
|
196
|
-
*
|
|
197
|
-
* 4 values are defined for each status:
|
|
198
|
-
* - bg: Light theme background color
|
|
199
|
-
* - text: Light theme text color
|
|
200
|
-
* - darkBg: Dark theme background color
|
|
201
|
-
* - darkText: Dark theme text color
|
|
202
|
-
*/
|
|
203
324
|
declare const defaultStatusColors: Record<string, {
|
|
204
325
|
bg: string;
|
|
205
326
|
text: string;
|
|
@@ -213,10 +334,13 @@ interface StatusCellProps {
|
|
|
213
334
|
* Custom color definitions
|
|
214
335
|
* Used to override default colors or add new colors
|
|
215
336
|
*
|
|
337
|
+
* Note: CSS variables automatically handle dark mode, so darkBg and darkText are optional.
|
|
338
|
+
* You can use CSS variables like: bg-[hsl(var(--lux-status-active-bg))] or custom colors.
|
|
339
|
+
*
|
|
216
340
|
* @example
|
|
217
341
|
* ```tsx
|
|
218
342
|
* colors={{
|
|
219
|
-
* Custom: { bg: "bg-
|
|
343
|
+
* Custom: { bg: "bg-[hsl(var(--lux-status-active-bg))]", text: "text-[hsl(var(--lux-status-active-text))]" }
|
|
220
344
|
* }}
|
|
221
345
|
* ```
|
|
222
346
|
*/
|
|
@@ -350,12 +474,12 @@ interface BooleanCellProps {
|
|
|
350
474
|
falseLabel?: string;
|
|
351
475
|
/**
|
|
352
476
|
* True değeri için renk sınıfları
|
|
353
|
-
* @default
|
|
477
|
+
* @default Uses CSS variable: text-[hsl(var(--lux-boolean-true))]
|
|
354
478
|
*/
|
|
355
479
|
trueColor?: string;
|
|
356
480
|
/**
|
|
357
481
|
* False değeri için renk sınıfları
|
|
358
|
-
* @default
|
|
482
|
+
* @default Uses CSS variable: text-[hsl(var(--lux-boolean-false))]
|
|
359
483
|
*/
|
|
360
484
|
falseColor?: string;
|
|
361
485
|
}
|
|
@@ -645,7 +769,7 @@ declare function createCopyableCell(value: string | number, options?: Omit<Copya
|
|
|
645
769
|
|
|
646
770
|
declare const buttonVariants: (props?: ({
|
|
647
771
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
648
|
-
size?: "default" | "
|
|
772
|
+
size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
|
|
649
773
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
650
774
|
declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
651
775
|
asChild?: boolean;
|
|
@@ -706,6 +830,8 @@ interface ColumnOptions<TData, TValue> {
|
|
|
706
830
|
id?: string;
|
|
707
831
|
header?: string | ((context: HeaderContext<TData, TValue>) => React$1.ReactNode);
|
|
708
832
|
cell?: (info: CellContext<TData, TValue>) => React$1.ReactNode;
|
|
833
|
+
/** Column width/size */
|
|
834
|
+
size?: number;
|
|
709
835
|
enableSorting?: boolean;
|
|
710
836
|
/** Column meta information (e.g. filterVariant) */
|
|
711
837
|
meta?: {
|
|
@@ -794,4 +920,4 @@ declare function createColumnsFromData<TData extends Record<string, unknown>>(da
|
|
|
794
920
|
cells?: Partial<Record<keyof TData, (info: CellContext<TData, unknown>) => React$1.ReactNode>>;
|
|
795
921
|
}): ColumnDef<TData, unknown>[];
|
|
796
922
|
|
|
797
|
-
export { BooleanCell, type BooleanCellProps, Button, Checkbox, ColumnFilter, type ColumnMeta, type ColumnOptions, type ColumnType, CopyableCell, type CopyableCellProps, CurrencyCell, type CurrencyCellProps, DateCell, type DateCellProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, LuxDataTableColumnHeader, LuxTable, type LuxTableOptions, type LuxTableProps, type PaginationInfo, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressCell, type ProgressCellProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SmartColumnOptions, SortIcon, type SortIconProps, StatusCell, type StatusCellProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, buttonVariants, cn, createColumnHelper, createColumnsFromData, createCopyableCell, defaultStatusColors };
|
|
923
|
+
export { BooleanCell, type BooleanCellConfig, type BooleanCellProps, Button, type CellRendererType, Checkbox, ColumnFilter, type ColumnMeta, type ColumnOptions, type ColumnType, CopyableCell, type CopyableCellConfig, type CopyableCellProps, CurrencyCell, type CurrencyCellConfig, type CurrencyCellProps, type CustomCellConfig, DateCell, type DateCellConfig, type DateCellProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FieldCellConfig, type GlobalCellConfig, Input, Label, LuxDataTableColumnHeader, LuxTable, type LuxTableOptions, type LuxTableProps, type PaginationInfo, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressCell, type ProgressCellConfig, type ProgressCellProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SmartColumnOptions, SortIcon, type SortIconProps, StatusCell, type StatusCellConfig, type StatusCellProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, buttonVariants, cn, createColumnHelper, createColumnsFromData, createCopyableCell, defaultGlobalCellConfig, defaultStatusColors, getFieldConfig, renderCell };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ColumnDef, SortingState, RowSelectionState, Column, Table as Table$1, HeaderContext
|
|
2
|
+
import { CellContext, ColumnDef, SortingState, RowSelectionState, Column, Table as Table$1, HeaderContext } from '@tanstack/react-table';
|
|
3
3
|
export { ColumnDef, RowSelectionState, SortingState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
|
|
4
4
|
import * as React$1 from 'react';
|
|
5
5
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
@@ -12,6 +12,133 @@ import * as SelectPrimitive from '@radix-ui/react-select';
|
|
|
12
12
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
13
13
|
import { ClassValue } from 'clsx';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Cell renderer tipi
|
|
17
|
+
*/
|
|
18
|
+
type CellRendererType = "status" | "progress" | "boolean" | "date" | "currency" | "copyable" | "custom";
|
|
19
|
+
/**
|
|
20
|
+
* Status cell config
|
|
21
|
+
*/
|
|
22
|
+
interface StatusCellConfig {
|
|
23
|
+
type: "status";
|
|
24
|
+
/** Custom status colors - default status'leri override eder veya üzerine ekler */
|
|
25
|
+
colors?: Record<string, {
|
|
26
|
+
bg: string;
|
|
27
|
+
text: string;
|
|
28
|
+
darkBg?: string;
|
|
29
|
+
darkText?: string;
|
|
30
|
+
}>;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Progress cell config
|
|
34
|
+
*/
|
|
35
|
+
interface ProgressCellConfig {
|
|
36
|
+
type: "progress";
|
|
37
|
+
/** Bar color */
|
|
38
|
+
barColor?: string;
|
|
39
|
+
/** Show percentage label */
|
|
40
|
+
showLabel?: boolean;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Boolean cell config
|
|
44
|
+
*/
|
|
45
|
+
interface BooleanCellConfig {
|
|
46
|
+
type: "boolean";
|
|
47
|
+
/** True label */
|
|
48
|
+
trueLabel?: string;
|
|
49
|
+
/** False label */
|
|
50
|
+
falseLabel?: string;
|
|
51
|
+
/** True color classes */
|
|
52
|
+
trueColor?: string;
|
|
53
|
+
/** False color classes */
|
|
54
|
+
falseColor?: string;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Date cell config
|
|
58
|
+
*/
|
|
59
|
+
interface DateCellConfig {
|
|
60
|
+
type: "date";
|
|
61
|
+
/** Date format */
|
|
62
|
+
format?: "short" | "long" | "relative";
|
|
63
|
+
/** Locale */
|
|
64
|
+
locale?: string;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Currency cell config
|
|
68
|
+
*/
|
|
69
|
+
interface CurrencyCellConfig {
|
|
70
|
+
type: "currency";
|
|
71
|
+
/** Currency code (e.g., "USD", "EUR") */
|
|
72
|
+
currency?: string;
|
|
73
|
+
/** Locale */
|
|
74
|
+
locale?: string;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Copyable cell config
|
|
78
|
+
*/
|
|
79
|
+
interface CopyableCellConfig {
|
|
80
|
+
type: "copyable";
|
|
81
|
+
/** Always show icon */
|
|
82
|
+
alwaysShowIcon?: boolean;
|
|
83
|
+
/** Tooltip text */
|
|
84
|
+
tooltip?: string;
|
|
85
|
+
/** Callback called after copying */
|
|
86
|
+
onCopy?: (value: string) => void;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Custom cell config
|
|
90
|
+
*/
|
|
91
|
+
interface CustomCellConfig {
|
|
92
|
+
type: "custom";
|
|
93
|
+
/** Custom renderer function */
|
|
94
|
+
render: (context: CellContext<any, unknown>) => React$1.ReactNode;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Field cell config - her field için cell renderer tanımı
|
|
98
|
+
*/
|
|
99
|
+
type FieldCellConfig = StatusCellConfig | ProgressCellConfig | BooleanCellConfig | DateCellConfig | CurrencyCellConfig | CopyableCellConfig | CustomCellConfig;
|
|
100
|
+
/**
|
|
101
|
+
* Global cell config - field bazlı cell renderer'ları tanımlar
|
|
102
|
+
*/
|
|
103
|
+
interface GlobalCellConfig {
|
|
104
|
+
/** Field bazlı cell config'leri - field adı -> config */
|
|
105
|
+
fields?: Record<string, FieldCellConfig>;
|
|
106
|
+
/** Default status colors - tüm status field'ları için geçerli */
|
|
107
|
+
defaultStatusColors?: Record<string, {
|
|
108
|
+
bg: string;
|
|
109
|
+
text: string;
|
|
110
|
+
darkBg?: string;
|
|
111
|
+
darkText?: string;
|
|
112
|
+
}>;
|
|
113
|
+
/** Auto-detect field types from field names and values (default: true) */
|
|
114
|
+
autoDetect?: boolean;
|
|
115
|
+
/** Field name patterns for auto-detection */
|
|
116
|
+
patterns?: {
|
|
117
|
+
/** Field names that should be treated as status (default: ['status', 'state', 'stage']) */
|
|
118
|
+
status?: string[];
|
|
119
|
+
/** Field names that should be treated as date (default: ['date', 'createdAt', 'updatedAt', 'joinDate', 'startDate', 'endDate']) */
|
|
120
|
+
date?: string[];
|
|
121
|
+
/** Field names that should be treated as currency (default: ['price', 'amount', 'salary', 'cost', 'revenue', 'total']) */
|
|
122
|
+
currency?: string[];
|
|
123
|
+
/** Field names that should be treated as boolean (default: ['isActive', 'isVerified', 'isEnabled', 'isDeleted']) */
|
|
124
|
+
boolean?: string[];
|
|
125
|
+
/** Field names that should be treated as copyable (default: ['id', 'email', 'phone', 'code', 'token']) */
|
|
126
|
+
copyable?: string[];
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Get field config with auto-detection
|
|
131
|
+
*/
|
|
132
|
+
declare function getFieldConfig(fieldName: string, value: unknown, config?: GlobalCellConfig): FieldCellConfig | null;
|
|
133
|
+
/**
|
|
134
|
+
* Default global cell config
|
|
135
|
+
*/
|
|
136
|
+
declare const defaultGlobalCellConfig: GlobalCellConfig;
|
|
137
|
+
/**
|
|
138
|
+
* Cell renderer'ı çalıştırır
|
|
139
|
+
*/
|
|
140
|
+
declare function renderCell<TData>(context: CellContext<TData, unknown>, fieldName: string, config?: GlobalCellConfig): React$1.ReactNode;
|
|
141
|
+
|
|
15
142
|
/**
|
|
16
143
|
* All type definitions for LuxTable
|
|
17
144
|
*/
|
|
@@ -40,14 +167,16 @@ interface LuxTableOptions {
|
|
|
40
167
|
showColumnVisibility?: boolean;
|
|
41
168
|
}
|
|
42
169
|
interface LuxTableProps<TData> {
|
|
43
|
-
/** Column definitions */
|
|
44
|
-
columns
|
|
170
|
+
/** Column definitions - if not provided, columns will be auto-generated from data */
|
|
171
|
+
columns?: ColumnDef<TData, any>[];
|
|
45
172
|
/** Table data */
|
|
46
173
|
data: TData[];
|
|
47
174
|
/** Additional CSS classes */
|
|
48
175
|
className?: string;
|
|
49
176
|
/** Table options */
|
|
50
177
|
options?: LuxTableOptions;
|
|
178
|
+
/** Global cell config - field bazlı otomatik cell renderer'ları tanımlar */
|
|
179
|
+
cellConfig?: GlobalCellConfig;
|
|
51
180
|
/** Controlled sorting state */
|
|
52
181
|
sorting?: SortingState;
|
|
53
182
|
/** Called when sorting changes */
|
|
@@ -66,8 +195,8 @@ interface LuxTableProps<TData> {
|
|
|
66
195
|
* Can be used in the meta field in column definitions
|
|
67
196
|
*/
|
|
68
197
|
interface ColumnMeta {
|
|
69
|
-
/** Filter type: text or
|
|
70
|
-
filterVariant?: "text" | "select";
|
|
198
|
+
/** Filter type: text, select, date, slider, or status */
|
|
199
|
+
filterVariant?: "text" | "select" | "date" | "slider" | "status";
|
|
71
200
|
}
|
|
72
201
|
/**
|
|
73
202
|
* Pagination information
|
|
@@ -111,21 +240,22 @@ interface PaginationInfo {
|
|
|
111
240
|
* />
|
|
112
241
|
* ```
|
|
113
242
|
*/
|
|
114
|
-
declare function LuxTable<TData>({ columns, data, className, options, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, onSelectedRowsChange, getRowId, }: LuxTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
243
|
+
declare function LuxTable<TData>({ columns, data, className, options, cellConfig, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, onSelectedRowsChange, getRowId, }: LuxTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
115
244
|
|
|
116
245
|
interface ColumnFilterProps<TData, TValue> {
|
|
117
246
|
column: Column<TData, TValue>;
|
|
247
|
+
data?: TData[];
|
|
118
248
|
}
|
|
119
249
|
/**
|
|
120
250
|
* Column filter component
|
|
121
|
-
*
|
|
251
|
+
* Supports multiple filter types: text, select, date, slider, status
|
|
122
252
|
*
|
|
123
253
|
* @example
|
|
124
254
|
* ```tsx
|
|
125
|
-
* <ColumnFilter column={column} />
|
|
255
|
+
* <ColumnFilter column={column} data={data} />
|
|
126
256
|
* ```
|
|
127
257
|
*/
|
|
128
|
-
declare function ColumnFilter<TData, TValue>({ column }: ColumnFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
258
|
+
declare function ColumnFilter<TData, TValue>({ column, data }: ColumnFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
129
259
|
|
|
130
260
|
interface TablePaginationProps<TData> {
|
|
131
261
|
table: Table$1<TData>;
|
|
@@ -191,15 +321,6 @@ interface SortIconProps {
|
|
|
191
321
|
*/
|
|
192
322
|
declare function SortIcon({ direction }: SortIconProps): react_jsx_runtime.JSX.Element;
|
|
193
323
|
|
|
194
|
-
/**
|
|
195
|
-
* Default colors for Status Cell
|
|
196
|
-
*
|
|
197
|
-
* 4 values are defined for each status:
|
|
198
|
-
* - bg: Light theme background color
|
|
199
|
-
* - text: Light theme text color
|
|
200
|
-
* - darkBg: Dark theme background color
|
|
201
|
-
* - darkText: Dark theme text color
|
|
202
|
-
*/
|
|
203
324
|
declare const defaultStatusColors: Record<string, {
|
|
204
325
|
bg: string;
|
|
205
326
|
text: string;
|
|
@@ -213,10 +334,13 @@ interface StatusCellProps {
|
|
|
213
334
|
* Custom color definitions
|
|
214
335
|
* Used to override default colors or add new colors
|
|
215
336
|
*
|
|
337
|
+
* Note: CSS variables automatically handle dark mode, so darkBg and darkText are optional.
|
|
338
|
+
* You can use CSS variables like: bg-[hsl(var(--lux-status-active-bg))] or custom colors.
|
|
339
|
+
*
|
|
216
340
|
* @example
|
|
217
341
|
* ```tsx
|
|
218
342
|
* colors={{
|
|
219
|
-
* Custom: { bg: "bg-
|
|
343
|
+
* Custom: { bg: "bg-[hsl(var(--lux-status-active-bg))]", text: "text-[hsl(var(--lux-status-active-text))]" }
|
|
220
344
|
* }}
|
|
221
345
|
* ```
|
|
222
346
|
*/
|
|
@@ -350,12 +474,12 @@ interface BooleanCellProps {
|
|
|
350
474
|
falseLabel?: string;
|
|
351
475
|
/**
|
|
352
476
|
* True değeri için renk sınıfları
|
|
353
|
-
* @default
|
|
477
|
+
* @default Uses CSS variable: text-[hsl(var(--lux-boolean-true))]
|
|
354
478
|
*/
|
|
355
479
|
trueColor?: string;
|
|
356
480
|
/**
|
|
357
481
|
* False değeri için renk sınıfları
|
|
358
|
-
* @default
|
|
482
|
+
* @default Uses CSS variable: text-[hsl(var(--lux-boolean-false))]
|
|
359
483
|
*/
|
|
360
484
|
falseColor?: string;
|
|
361
485
|
}
|
|
@@ -645,7 +769,7 @@ declare function createCopyableCell(value: string | number, options?: Omit<Copya
|
|
|
645
769
|
|
|
646
770
|
declare const buttonVariants: (props?: ({
|
|
647
771
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
648
|
-
size?: "default" | "
|
|
772
|
+
size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
|
|
649
773
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
650
774
|
declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
651
775
|
asChild?: boolean;
|
|
@@ -706,6 +830,8 @@ interface ColumnOptions<TData, TValue> {
|
|
|
706
830
|
id?: string;
|
|
707
831
|
header?: string | ((context: HeaderContext<TData, TValue>) => React$1.ReactNode);
|
|
708
832
|
cell?: (info: CellContext<TData, TValue>) => React$1.ReactNode;
|
|
833
|
+
/** Column width/size */
|
|
834
|
+
size?: number;
|
|
709
835
|
enableSorting?: boolean;
|
|
710
836
|
/** Column meta information (e.g. filterVariant) */
|
|
711
837
|
meta?: {
|
|
@@ -794,4 +920,4 @@ declare function createColumnsFromData<TData extends Record<string, unknown>>(da
|
|
|
794
920
|
cells?: Partial<Record<keyof TData, (info: CellContext<TData, unknown>) => React$1.ReactNode>>;
|
|
795
921
|
}): ColumnDef<TData, unknown>[];
|
|
796
922
|
|
|
797
|
-
export { BooleanCell, type BooleanCellProps, Button, Checkbox, ColumnFilter, type ColumnMeta, type ColumnOptions, type ColumnType, CopyableCell, type CopyableCellProps, CurrencyCell, type CurrencyCellProps, DateCell, type DateCellProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, LuxDataTableColumnHeader, LuxTable, type LuxTableOptions, type LuxTableProps, type PaginationInfo, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressCell, type ProgressCellProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SmartColumnOptions, SortIcon, type SortIconProps, StatusCell, type StatusCellProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, buttonVariants, cn, createColumnHelper, createColumnsFromData, createCopyableCell, defaultStatusColors };
|
|
923
|
+
export { BooleanCell, type BooleanCellConfig, type BooleanCellProps, Button, type CellRendererType, Checkbox, ColumnFilter, type ColumnMeta, type ColumnOptions, type ColumnType, CopyableCell, type CopyableCellConfig, type CopyableCellProps, CurrencyCell, type CurrencyCellConfig, type CurrencyCellProps, type CustomCellConfig, DateCell, type DateCellConfig, type DateCellProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FieldCellConfig, type GlobalCellConfig, Input, Label, LuxDataTableColumnHeader, LuxTable, type LuxTableOptions, type LuxTableProps, type PaginationInfo, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressCell, type ProgressCellConfig, type ProgressCellProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SmartColumnOptions, SortIcon, type SortIconProps, StatusCell, type StatusCellConfig, type StatusCellProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, buttonVariants, cn, createColumnHelper, createColumnsFromData, createCopyableCell, defaultGlobalCellConfig, defaultStatusColors, getFieldConfig, renderCell };
|