lecom-ui 5.2.40 → 5.2.41

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.
Files changed (3) hide show
  1. package/dist/components/DataTable/Table.js +60 -40
  2. package/dist/index.d.ts +5 -0
  3. package/package.json +1 -1
package/dist/components/DataTable/Table.js CHANGED
@@ -13,25 +13,35 @@ function Table({
13
13
  onIsSelected
14
14
  }) {
15
15
  const styleColumn = (meta, elem) => {
16
+ if (!meta) return void 0;
17
+ let style = {};
16
18
  if (elem === "td" && meta.truncate) {
17
- return {
19
+ style = {
20
+ ...style,
18
21
  width: meta.width,
19
22
  overflow: "hidden",
20
23
  maxWidth: "0",
21
24
  textOverflow: "ellipsis",
22
- whiteSpace: "nowrap"
25
+ whiteSpace: "nowrap",
26
+ ...typeof meta.cellStyle === "object" && meta.cellStyle !== null ? meta.cellStyle : {}
27
+ };
28
+ } else {
29
+ style = {
30
+ ...style,
31
+ width: meta.width,
32
+ ...elem === "td" ? typeof meta.cellStyle === "object" && meta.cellStyle !== null ? meta.cellStyle : {} : typeof meta.headerStyle === "object" && meta.headerStyle !== null ? meta.headerStyle : {}
23
33
  };
24
34
  }
25
- return {
26
- width: meta.width
27
- };
35
+ if (meta.align)
36
+ style.textAlign = meta.align;
37
+ return style;
28
38
  };
29
- const getFixed = (meta) => meta.fixed;
39
+ const getFixed = (meta) => meta?.fixed;
30
40
  if (isLoading) {
31
41
  if (skeleton) {
32
42
  return skeleton;
33
43
  }
34
- const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
44
+ const arrSkeleton = Array.from({ length: 15 }, (_, i) => i + 1);
35
45
  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
36
46
  Skeleton,
37
47
  {
@@ -40,45 +50,55 @@ function Table({
40
50
  }
41
51
  )));
42
52
  }
43
- return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10 bg-white" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
44
- "th",
45
- {
46
- key: header.id,
47
- className: cn(
48
- "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
49
- size === "small" && "h-10",
50
- header.column.columnDef.meta?.headerClassName
51
- ),
52
- "data-header": header.id,
53
- "data-fixed": getFixed(header.column.columnDef.meta),
54
- style: styleColumn(
55
- header.column.columnDef.meta,
56
- "th"
57
- ),
58
- onClick: header.column.getToggleSortingHandler()
59
- },
60
- header.isPlaceholder ? null : flexRender(
61
- header.column.columnDef.header,
62
- header.getContext()
63
- )
64
- ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
53
+ return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10 bg-white" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {
54
+ const meta = header.column.columnDef.meta || {};
55
+ return /* @__PURE__ */ React.createElement(
56
+ "th",
57
+ {
58
+ key: header.id,
59
+ className: cn(
60
+ "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset]",
61
+ size === "small" && "h-10",
62
+ meta.headerClassName,
63
+ meta.align && `text-${meta.align}`
64
+ ),
65
+ "data-header": header.id,
66
+ "data-fixed": getFixed(meta),
67
+ style: styleColumn(meta, "th"),
68
+ onClick: header.column.getToggleSortingHandler(),
69
+ ...typeof meta.headerProps === "object" && meta.headerProps !== null ? meta.headerProps : {}
70
+ },
71
+ header.isPlaceholder ? null : flexRender(
72
+ header.column.columnDef.header,
73
+ header.getContext()
74
+ )
75
+ );
76
+ })))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
65
77
  "tr",
66
78
  {
67
79
  key: row.id,
68
80
  "data-state": onIsSelected?.(row) ? "selected" : "",
69
81
  className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
70
82
  },
71
- row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
72
- "td",
73
- {
74
- key: cell.id,
75
- className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
76
- "data-column": cell.column.id,
77
- "data-fixed": getFixed(cell.column.columnDef.meta),
78
- style: styleColumn(cell.column.columnDef.meta, "td")
79
- },
80
- flexRender(cell.column.columnDef.cell, cell.getContext())
81
- ))
83
+ row.getVisibleCells().map((cell) => {
84
+ const meta = cell.column.columnDef.meta || {};
85
+ return /* @__PURE__ */ React.createElement(
86
+ "td",
87
+ {
88
+ key: cell.id,
89
+ className: cn(
90
+ "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset]",
91
+ meta.cellClassName,
92
+ meta.align && `text-${meta.align}`
93
+ ),
94
+ "data-column": cell.column.id,
95
+ "data-fixed": getFixed(meta),
96
+ style: styleColumn(meta, "td"),
97
+ ...typeof meta.cellProps === "object" && meta.cellProps !== null ? meta.cellProps : {}
98
+ },
99
+ flexRender(cell.column.columnDef.cell, cell.getContext())
100
+ );
101
+ })
82
102
  )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
83
103
  "td",
84
104
  {
package/dist/index.d.ts CHANGED
@@ -468,6 +468,11 @@ interface Column<TData, TValue> {
468
468
  truncate?: boolean;
469
469
  headerClassName?: string;
470
470
  headerStyle?: React.CSSProperties;
471
+ cellClassName?: string;
472
+ cellStyle?: React.CSSProperties;
473
+ cellProps?: React.TdHTMLAttributes<HTMLTableCellElement>;
474
+ headerProps?: React.ThHTMLAttributes<HTMLTableHeaderCellElement>;
475
+ align?: 'left' | 'center' | 'right';
471
476
  customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
472
477
  render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
473
478
  onSort?: ({ table, column }: ColumnSort<TData, TValue>) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lecom-ui",
3
- "version": "5.2.40",
3
+ "version": "5.2.41",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",