next-helios-fe 1.4.21 → 1.4.23
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/table/index.d.ts +12 -7
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/table/index.tsx +42 -11
package/package.json
CHANGED
|
@@ -21,24 +21,29 @@ interface TableProps {
|
|
|
21
21
|
options?: {
|
|
22
22
|
toolbar?: {
|
|
23
23
|
addData?: {
|
|
24
|
-
show
|
|
25
|
-
onClick
|
|
24
|
+
show: boolean;
|
|
25
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
26
26
|
};
|
|
27
27
|
search?: {
|
|
28
|
-
show
|
|
28
|
+
show: boolean;
|
|
29
29
|
};
|
|
30
30
|
filter?: {
|
|
31
|
-
show
|
|
31
|
+
show: boolean;
|
|
32
32
|
};
|
|
33
33
|
export?: {
|
|
34
|
-
show
|
|
34
|
+
show: boolean;
|
|
35
35
|
};
|
|
36
36
|
columnSearch?: {
|
|
37
|
-
show
|
|
37
|
+
show: boolean;
|
|
38
38
|
};
|
|
39
39
|
pagination?: {
|
|
40
|
-
show
|
|
40
|
+
show: boolean;
|
|
41
41
|
};
|
|
42
|
+
customTool?: {
|
|
43
|
+
icon: string;
|
|
44
|
+
variant: "primary" | "secondary" | "success" | "warning" | "danger";
|
|
45
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
46
|
+
}[];
|
|
42
47
|
};
|
|
43
48
|
hideNumberColumn?: boolean;
|
|
44
49
|
border?: boolean;
|
|
@@ -421,7 +426,7 @@ export const Table: TableComponentProps = ({
|
|
|
421
426
|
}
|
|
422
427
|
})}
|
|
423
428
|
{actionColumn && (
|
|
424
|
-
<td className="px-4 py-1 border-b bg-secondary-bg text-center">
|
|
429
|
+
<td className="sticky right-0 px-4 py-1 border-b bg-secondary-bg text-center">
|
|
425
430
|
{actionColumn(item)}
|
|
426
431
|
</td>
|
|
427
432
|
)}
|
|
@@ -443,10 +448,36 @@ export const Table: TableComponentProps = ({
|
|
|
443
448
|
>
|
|
444
449
|
{title && <span className="text-lg whitespace-nowrap">{title}</span>}
|
|
445
450
|
<div className="flex items-center gap-4">
|
|
451
|
+
{options?.toolbar?.customTool &&
|
|
452
|
+
options?.toolbar?.customTool?.length !== 0 &&
|
|
453
|
+
options?.toolbar?.customTool.map((item) => {
|
|
454
|
+
const variant =
|
|
455
|
+
item.variant === "secondary"
|
|
456
|
+
? "bg-secondary hover:bg-secondary-dark"
|
|
457
|
+
: item.variant === "success"
|
|
458
|
+
? "bg-success hover:bg-success-dark"
|
|
459
|
+
: item.variant === "warning"
|
|
460
|
+
? "bg-warning hover:bg-warning-dark"
|
|
461
|
+
: item.variant === "danger"
|
|
462
|
+
? "bg-danger hover:bg-danger-dark"
|
|
463
|
+
: "bg-primary hover:bg-primary-dark";
|
|
464
|
+
|
|
465
|
+
return (
|
|
466
|
+
<button
|
|
467
|
+
type="button"
|
|
468
|
+
className={`p-1.5 rounded-full text-white active:opacity-70 active:duration-300 active:ease-out ${variant}`}
|
|
469
|
+
onClick={(e) => {
|
|
470
|
+
item.onClick && item.onClick(e);
|
|
471
|
+
}}
|
|
472
|
+
>
|
|
473
|
+
<Icon icon={item.icon} className="text-2xl" />
|
|
474
|
+
</button>
|
|
475
|
+
);
|
|
476
|
+
})}
|
|
446
477
|
{options?.toolbar?.addData?.show !== false && (
|
|
447
478
|
<button
|
|
448
479
|
type="button"
|
|
449
|
-
className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
|
|
480
|
+
className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark active:opacity-70 active:duration-300 active:ease-out"
|
|
450
481
|
onClick={(e) => {
|
|
451
482
|
options?.toolbar?.addData?.onClick &&
|
|
452
483
|
options?.toolbar?.addData?.onClick(e);
|
|
@@ -575,7 +606,7 @@ export const Table: TableComponentProps = ({
|
|
|
575
606
|
{!options?.hideNumberColumn && (
|
|
576
607
|
<th className="sticky left-0 w-min px-4 py-2 z-10 bg-secondary-bg font-medium text-center whitespace-nowrap">
|
|
577
608
|
<div className="flex flex-col">
|
|
578
|
-
<span>
|
|
609
|
+
<span>No.</span>
|
|
579
610
|
{options?.toolbar?.columnSearch?.show !== false && (
|
|
580
611
|
<div className="invisible w-0 overflow-hidden">
|
|
581
612
|
<input
|
|
@@ -589,7 +620,7 @@ export const Table: TableComponentProps = ({
|
|
|
589
620
|
)}
|
|
590
621
|
{headerArr}
|
|
591
622
|
{actionColumn && (
|
|
592
|
-
<th className="w-min px-4 py-2 bg-secondary-bg font-medium text-center">
|
|
623
|
+
<th className="sticky right-0 w-min px-4 py-2 z-10 bg-secondary-bg font-medium text-center whitespace-nowrap">
|
|
593
624
|
<div className="flex flex-col">
|
|
594
625
|
<span>Actions</span>
|
|
595
626
|
{options?.toolbar?.columnSearch?.show !== false && (
|