@nccirtu/tablefy 0.7.2 → 0.7.3
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/columns/columns/enum-column.d.ts +52 -0
- package/dist/columns/columns/index.d.ts +2 -0
- package/dist/columns/enum-column.d.ts +52 -0
- package/dist/columns/index.d.ts +3 -5
- package/dist/columns/index.esm.js +95 -1
- package/dist/columns/index.esm.js.map +1 -1
- package/dist/columns/index.js +95 -0
- package/dist/columns/index.js.map +1 -1
- package/dist/index.d.ts +3 -5
- package/dist/index.esm.js +64 -124
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +63 -126
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { ColumnDef } from "@tanstack/react-table";
|
|
2
|
+
import { LucideIcon } from "lucide-react";
|
|
3
|
+
import { BaseColumn } from "./base-column";
|
|
4
|
+
import { BaseColumnConfig } from "./types";
|
|
5
|
+
export interface EnumOption<T = string | number> {
|
|
6
|
+
value: T;
|
|
7
|
+
label: string;
|
|
8
|
+
icon?: LucideIcon;
|
|
9
|
+
color?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info";
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
interface EnumColumnConfig<TData> extends BaseColumnConfig<TData> {
|
|
13
|
+
options: EnumOption[];
|
|
14
|
+
asBadge?: boolean;
|
|
15
|
+
showIcon?: boolean;
|
|
16
|
+
iconPosition?: "left" | "right";
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare class EnumColumn<TData> extends BaseColumn<TData, EnumColumnConfig<TData>> {
|
|
20
|
+
constructor(accessor: keyof TData | string);
|
|
21
|
+
static make<TData>(accessor: keyof TData | string): EnumColumn<TData>;
|
|
22
|
+
/**
|
|
23
|
+
* Define the enum options with labels, icons, and colors
|
|
24
|
+
*/
|
|
25
|
+
options(options: EnumOption[]): this;
|
|
26
|
+
/**
|
|
27
|
+
* Display as plain text instead of badge
|
|
28
|
+
*/
|
|
29
|
+
asText(): this;
|
|
30
|
+
/**
|
|
31
|
+
* Display as badge (default)
|
|
32
|
+
*/
|
|
33
|
+
asBadge(): this;
|
|
34
|
+
/**
|
|
35
|
+
* Hide icons
|
|
36
|
+
*/
|
|
37
|
+
hideIcon(): this;
|
|
38
|
+
/**
|
|
39
|
+
* Show icons (default)
|
|
40
|
+
*/
|
|
41
|
+
showIcon(): this;
|
|
42
|
+
/**
|
|
43
|
+
* Set icon position
|
|
44
|
+
*/
|
|
45
|
+
iconPosition(position: "left" | "right"): this;
|
|
46
|
+
/**
|
|
47
|
+
* Placeholder for unknown values
|
|
48
|
+
*/
|
|
49
|
+
placeholder(placeholder: string): this;
|
|
50
|
+
build(): ColumnDef<TData, unknown>;
|
|
51
|
+
}
|
|
52
|
+
export {};
|
|
@@ -13,4 +13,6 @@ export { ProgressColumn } from "./progress-column";
|
|
|
13
13
|
export { SelectColumn } from "./select-column";
|
|
14
14
|
export { TextColumn } from "./text-column";
|
|
15
15
|
export { ActionsColumn } from "./actions-column";
|
|
16
|
+
export { EnumColumn } from "./enum-column";
|
|
17
|
+
export type { EnumOption } from "./enum-column";
|
|
16
18
|
export type * from "./types";
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { ColumnDef } from "@tanstack/react-table";
|
|
2
|
+
import { LucideIcon } from "lucide-react";
|
|
3
|
+
import { BaseColumn } from "./base-column";
|
|
4
|
+
import { BaseColumnConfig } from "./types";
|
|
5
|
+
export interface EnumOption<T = string | number> {
|
|
6
|
+
value: T;
|
|
7
|
+
label: string;
|
|
8
|
+
icon?: LucideIcon;
|
|
9
|
+
color?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info";
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
interface EnumColumnConfig<TData> extends BaseColumnConfig<TData> {
|
|
13
|
+
options: EnumOption[];
|
|
14
|
+
asBadge?: boolean;
|
|
15
|
+
showIcon?: boolean;
|
|
16
|
+
iconPosition?: "left" | "right";
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare class EnumColumn<TData> extends BaseColumn<TData, EnumColumnConfig<TData>> {
|
|
20
|
+
constructor(accessor: keyof TData | string);
|
|
21
|
+
static make<TData>(accessor: keyof TData | string): EnumColumn<TData>;
|
|
22
|
+
/**
|
|
23
|
+
* Define the enum options with labels, icons, and colors
|
|
24
|
+
*/
|
|
25
|
+
options(options: EnumOption[]): this;
|
|
26
|
+
/**
|
|
27
|
+
* Display as plain text instead of badge
|
|
28
|
+
*/
|
|
29
|
+
asText(): this;
|
|
30
|
+
/**
|
|
31
|
+
* Display as badge (default)
|
|
32
|
+
*/
|
|
33
|
+
asBadge(): this;
|
|
34
|
+
/**
|
|
35
|
+
* Hide icons
|
|
36
|
+
*/
|
|
37
|
+
hideIcon(): this;
|
|
38
|
+
/**
|
|
39
|
+
* Show icons (default)
|
|
40
|
+
*/
|
|
41
|
+
showIcon(): this;
|
|
42
|
+
/**
|
|
43
|
+
* Set icon position
|
|
44
|
+
*/
|
|
45
|
+
iconPosition(position: "left" | "right"): this;
|
|
46
|
+
/**
|
|
47
|
+
* Placeholder for unknown values
|
|
48
|
+
*/
|
|
49
|
+
placeholder(placeholder: string): this;
|
|
50
|
+
build(): ColumnDef<TData, unknown>;
|
|
51
|
+
}
|
|
52
|
+
export {};
|
package/dist/columns/index.d.ts
CHANGED
|
@@ -12,11 +12,9 @@ export { ImageColumn } from "./columns/image-column";
|
|
|
12
12
|
export { InputColumn, InputColumn as inputColumn, } from "./columns/input-column";
|
|
13
13
|
export { LinkColumn } from "./columns/link-column";
|
|
14
14
|
export { NumberColumn } from "./columns/number-column";
|
|
15
|
-
export { ProgressColumn,
|
|
16
|
-
export {
|
|
17
|
-
export {
|
|
18
|
-
export { ActionsColumn } from "./columns/actions-column";
|
|
19
|
-
export type { ActionItem } from "./columns/actions-column";
|
|
15
|
+
export { ProgressColumn, SelectColumn } from "./columns";
|
|
16
|
+
export { EnumColumn, EnumColumn as enumColumn } from "./columns/enum-column";
|
|
17
|
+
export type { EnumOption } from "./columns/enum-column";
|
|
20
18
|
export { ConfirmProvider, confirm } from "./confirm";
|
|
21
19
|
export type { ConfirmOptions } from "./confirm";
|
|
22
20
|
export type { DataTableConfig, EmptyStateConfig, FilterConfig, HeaderAction, PaginationConfig, SearchConfig, } from "./types";
|
|
@@ -1330,5 +1330,99 @@ class ActionsColumn {
|
|
|
1330
1330
|
}
|
|
1331
1331
|
}
|
|
1332
1332
|
|
|
1333
|
-
|
|
1333
|
+
class EnumColumn extends BaseColumn {
|
|
1334
|
+
constructor(accessor) {
|
|
1335
|
+
super(accessor);
|
|
1336
|
+
this.config.asBadge = true;
|
|
1337
|
+
this.config.showIcon = true;
|
|
1338
|
+
this.config.iconPosition = "left";
|
|
1339
|
+
}
|
|
1340
|
+
static make(accessor) {
|
|
1341
|
+
return new EnumColumn(accessor);
|
|
1342
|
+
}
|
|
1343
|
+
/**
|
|
1344
|
+
* Define the enum options with labels, icons, and colors
|
|
1345
|
+
*/
|
|
1346
|
+
options(options) {
|
|
1347
|
+
this.config.options = options;
|
|
1348
|
+
return this;
|
|
1349
|
+
}
|
|
1350
|
+
/**
|
|
1351
|
+
* Display as plain text instead of badge
|
|
1352
|
+
*/
|
|
1353
|
+
asText() {
|
|
1354
|
+
this.config.asBadge = false;
|
|
1355
|
+
return this;
|
|
1356
|
+
}
|
|
1357
|
+
/**
|
|
1358
|
+
* Display as badge (default)
|
|
1359
|
+
*/
|
|
1360
|
+
asBadge() {
|
|
1361
|
+
this.config.asBadge = true;
|
|
1362
|
+
return this;
|
|
1363
|
+
}
|
|
1364
|
+
/**
|
|
1365
|
+
* Hide icons
|
|
1366
|
+
*/
|
|
1367
|
+
hideIcon() {
|
|
1368
|
+
this.config.showIcon = false;
|
|
1369
|
+
return this;
|
|
1370
|
+
}
|
|
1371
|
+
/**
|
|
1372
|
+
* Show icons (default)
|
|
1373
|
+
*/
|
|
1374
|
+
showIcon() {
|
|
1375
|
+
this.config.showIcon = true;
|
|
1376
|
+
return this;
|
|
1377
|
+
}
|
|
1378
|
+
/**
|
|
1379
|
+
* Set icon position
|
|
1380
|
+
*/
|
|
1381
|
+
iconPosition(position) {
|
|
1382
|
+
this.config.iconPosition = position;
|
|
1383
|
+
return this;
|
|
1384
|
+
}
|
|
1385
|
+
/**
|
|
1386
|
+
* Placeholder for unknown values
|
|
1387
|
+
*/
|
|
1388
|
+
placeholder(placeholder) {
|
|
1389
|
+
this.config.placeholder = placeholder;
|
|
1390
|
+
return this;
|
|
1391
|
+
}
|
|
1392
|
+
build() {
|
|
1393
|
+
const { accessor, label, sortable, options, asBadge, showIcon, iconPosition, placeholder, } = this.config;
|
|
1394
|
+
if (!options || options.length === 0) {
|
|
1395
|
+
throw new Error(`EnumColumn "${String(accessor)}" requires options to be defined`);
|
|
1396
|
+
}
|
|
1397
|
+
return {
|
|
1398
|
+
accessorKey: accessor,
|
|
1399
|
+
header: ({ column }) => {
|
|
1400
|
+
const displayLabel = label || String(accessor);
|
|
1401
|
+
if (!sortable) {
|
|
1402
|
+
return (jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
|
|
1403
|
+
}
|
|
1404
|
+
return (jsxs(Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
|
|
1405
|
+
},
|
|
1406
|
+
cell: ({ getValue }) => {
|
|
1407
|
+
const value = getValue();
|
|
1408
|
+
// Find matching option
|
|
1409
|
+
const option = options.find((opt) => opt.value === value);
|
|
1410
|
+
// Handle unknown values
|
|
1411
|
+
if (!option) {
|
|
1412
|
+
return (jsx("span", { className: cn("text-muted-foreground", this.getAlignmentClass(), this.config.cellClassName), children: placeholder || "—" }));
|
|
1413
|
+
}
|
|
1414
|
+
const Icon = option.icon;
|
|
1415
|
+
const iconElement = showIcon && Icon ? jsx(Icon, { className: "h-4 w-4" }) : null;
|
|
1416
|
+
// Render as Badge
|
|
1417
|
+
if (asBadge) {
|
|
1418
|
+
return (jsx("div", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: jsxs(Badge, { variant: option.color || "default", className: cn("inline-flex items-center gap-1.5", option.className), children: [iconPosition === "left" && iconElement, option.label, iconPosition === "right" && iconElement] }) }));
|
|
1419
|
+
}
|
|
1420
|
+
// Render as plain text with icon
|
|
1421
|
+
return (jsxs("div", { className: cn("inline-flex items-center gap-2", this.getAlignmentClass(), this.config.cellClassName, option.className), children: [iconPosition === "left" && iconElement, jsx("span", { children: option.label }), iconPosition === "right" && iconElement] }));
|
|
1422
|
+
},
|
|
1423
|
+
};
|
|
1424
|
+
}
|
|
1425
|
+
}
|
|
1426
|
+
|
|
1427
|
+
export { ActionsColumn, AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, DateColumn, DropdownColumn, EnumColumn, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TextColumn };
|
|
1334
1428
|
//# sourceMappingURL=index.esm.js.map
|