@taiv/ui 1.10.2 → 1.10.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/components/Layout/Table/Table.d.ts +7 -3
- package/dist/components/Layout/Table/Table.d.ts.map +1 -1
- package/dist/components/Layout/Table/Table.js +4 -4
- package/dist/components/Layout/Table/Table.stories.d.ts.map +1 -1
- package/dist/components/Layout/Table/Table.stories.js +11 -0
- package/package.json +1 -1
|
@@ -3,7 +3,10 @@ interface ColumnConfig {
|
|
|
3
3
|
heading?: string;
|
|
4
4
|
style?: CSSProperties;
|
|
5
5
|
}
|
|
6
|
-
interface
|
|
6
|
+
interface TableItem {
|
|
7
|
+
key: string | number;
|
|
8
|
+
}
|
|
9
|
+
interface TableProps<T extends TableItem> {
|
|
7
10
|
columnConfigs: ColumnConfig[];
|
|
8
11
|
data: T[];
|
|
9
12
|
ListItem: React.ComponentType<{
|
|
@@ -13,6 +16,7 @@ interface TableProps<T> {
|
|
|
13
16
|
shadow?: boolean;
|
|
14
17
|
divider?: boolean;
|
|
15
18
|
}
|
|
16
|
-
declare const
|
|
17
|
-
export
|
|
19
|
+
declare const TableComponent: <T extends TableItem>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const Table: typeof TableComponent;
|
|
21
|
+
export { type ColumnConfig, type TableProps };
|
|
18
22
|
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA2B,MAAM,OAAO,CAAC;AAItE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACtC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA4EzI,CAAC;AAEF,eAAO,MAAM,KAAK,EAA2B,OAAO,cAAc,CAAC;AAEnE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { memo, useEffect, useRef } from 'react';
|
|
3
3
|
import { Box } from '../Box/Box';
|
|
4
4
|
import { fontWeight, neutral } from '../../../constants';
|
|
5
|
-
const
|
|
5
|
+
const TableComponent = ({ columnConfigs, data, ListItem, placeholder, shadow = false, divider = true }) => {
|
|
6
6
|
const tableRef = useRef(null);
|
|
7
7
|
/**
|
|
8
8
|
* Apply column styles to the table cells.
|
|
@@ -47,6 +47,6 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false, div
|
|
|
47
47
|
paddingBottom: '9px',
|
|
48
48
|
paddingTop: '9px',
|
|
49
49
|
...column.style,
|
|
50
|
-
}, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item },
|
|
50
|
+
}, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item }, item.key))) })] }) }));
|
|
51
51
|
};
|
|
52
|
-
export
|
|
52
|
+
export const Table = memo(TableComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}
|
|
@@ -41,6 +41,7 @@ export default meta;
|
|
|
41
41
|
// Mock data
|
|
42
42
|
const userData = [
|
|
43
43
|
{
|
|
44
|
+
key: 'user-1',
|
|
44
45
|
id: '1',
|
|
45
46
|
name: 'John Doe',
|
|
46
47
|
email: 'john.doe@example.com',
|
|
@@ -49,6 +50,7 @@ const userData = [
|
|
|
49
50
|
lastLogin: '2024-01-15',
|
|
50
51
|
},
|
|
51
52
|
{
|
|
53
|
+
key: 'user-2',
|
|
52
54
|
id: '2',
|
|
53
55
|
name: 'Jane Smith',
|
|
54
56
|
email: 'jane.smith@example.com',
|
|
@@ -57,6 +59,7 @@ const userData = [
|
|
|
57
59
|
lastLogin: '2024-01-14',
|
|
58
60
|
},
|
|
59
61
|
{
|
|
62
|
+
key: 'user-3',
|
|
60
63
|
id: '3',
|
|
61
64
|
name: 'Bob Johnson',
|
|
62
65
|
email: 'bob.johnson@example.com',
|
|
@@ -65,6 +68,7 @@ const userData = [
|
|
|
65
68
|
lastLogin: '2024-01-10',
|
|
66
69
|
},
|
|
67
70
|
{
|
|
71
|
+
key: 'user-4',
|
|
68
72
|
id: '4',
|
|
69
73
|
name: 'Alice Williams',
|
|
70
74
|
email: 'alice.williams@example.com',
|
|
@@ -75,6 +79,7 @@ const userData = [
|
|
|
75
79
|
];
|
|
76
80
|
const productData = [
|
|
77
81
|
{
|
|
82
|
+
key: 'product-1',
|
|
78
83
|
id: '1',
|
|
79
84
|
name: 'Premium Widget',
|
|
80
85
|
category: 'Electronics',
|
|
@@ -83,6 +88,7 @@ const productData = [
|
|
|
83
88
|
status: 'in-stock',
|
|
84
89
|
},
|
|
85
90
|
{
|
|
91
|
+
key: 'product-2',
|
|
86
92
|
id: '2',
|
|
87
93
|
name: 'Standard Widget',
|
|
88
94
|
category: 'Electronics',
|
|
@@ -91,6 +97,7 @@ const productData = [
|
|
|
91
97
|
status: 'low-stock',
|
|
92
98
|
},
|
|
93
99
|
{
|
|
100
|
+
key: 'product-3',
|
|
94
101
|
id: '3',
|
|
95
102
|
name: 'Basic Widget',
|
|
96
103
|
category: 'Accessories',
|
|
@@ -99,6 +106,7 @@ const productData = [
|
|
|
99
106
|
status: 'out-of-stock',
|
|
100
107
|
},
|
|
101
108
|
{
|
|
109
|
+
key: 'product-4',
|
|
102
110
|
id: '4',
|
|
103
111
|
name: 'Deluxe Widget',
|
|
104
112
|
category: 'Electronics',
|
|
@@ -109,6 +117,7 @@ const productData = [
|
|
|
109
117
|
];
|
|
110
118
|
const projectData = [
|
|
111
119
|
{
|
|
120
|
+
key: 'project-1',
|
|
112
121
|
id: '1',
|
|
113
122
|
title: 'Website Redesign',
|
|
114
123
|
team: ['Alice', 'Bob', 'Charlie'],
|
|
@@ -117,6 +126,7 @@ const projectData = [
|
|
|
117
126
|
priority: 'high',
|
|
118
127
|
},
|
|
119
128
|
{
|
|
129
|
+
key: 'project-2',
|
|
120
130
|
id: '2',
|
|
121
131
|
title: 'Mobile App Update',
|
|
122
132
|
team: ['David', 'Eve'],
|
|
@@ -125,6 +135,7 @@ const projectData = [
|
|
|
125
135
|
priority: 'medium',
|
|
126
136
|
},
|
|
127
137
|
{
|
|
138
|
+
key: 'project-3',
|
|
128
139
|
id: '3',
|
|
129
140
|
title: 'API Documentation',
|
|
130
141
|
team: ['Frank', 'Grace'],
|