@symply.io/basic-components 1.1.2-beta.5 → 1.1.2-beta.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/DataTable/TableBody.js +13 -2
- package/DataTable/TableBodyRow.js +4 -4
- package/DataTable/TableFooter.js +10 -16
- package/DataTable/TableHeader.js +10 -16
- package/DataTable/index.js +35 -2
- package/DataTable/types.d.ts +10 -5
- package/README.md +63 -1
- package/package.json +1 -1
package/DataTable/TableBody.js
CHANGED
|
@@ -9,13 +9,24 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
12
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
24
|
import TableRow from "@mui/material/TableRow";
|
|
14
25
|
import TableBody from "@mui/material/TableBody";
|
|
15
26
|
import TableCell from "@mui/material/TableCell";
|
|
16
27
|
import TableBodyRow from "./TableBodyRow";
|
|
17
28
|
function TBody(props) {
|
|
18
|
-
var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a,
|
|
19
|
-
return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns
|
|
29
|
+
var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
|
|
30
|
+
return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, __assign({ row: row, rows: rows, columns: columns }, rest), "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
|
|
20
31
|
}
|
|
21
32
|
export default TBody;
|
|
@@ -16,7 +16,7 @@ import TableCell from "@mui/material/TableCell";
|
|
|
16
16
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
17
17
|
import useTheme from "@mui/material/styles/useTheme";
|
|
18
18
|
function TableBodyRow(props) {
|
|
19
|
-
var row = props.row, rows = props.rows, columns = props.columns, onRowClick = props.onRowClick;
|
|
19
|
+
var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick;
|
|
20
20
|
var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
@@ -49,7 +49,7 @@ function TableBodyRow(props) {
|
|
|
49
49
|
position: "sticky",
|
|
50
50
|
zIndex: 10,
|
|
51
51
|
backgroundColor: onRowClick && rowEl ? "#fafafa" : "Menu",
|
|
52
|
-
"&::after": index === fixedLeftCols.length - 1
|
|
52
|
+
"&::after": index === fixedLeftCols.length - 1 && leftShadowVisible
|
|
53
53
|
? {
|
|
54
54
|
position: "absolute",
|
|
55
55
|
top: 0,
|
|
@@ -77,14 +77,14 @@ function TableBodyRow(props) {
|
|
|
77
77
|
position: "sticky",
|
|
78
78
|
zIndex: 10,
|
|
79
79
|
backgroundColor: onRowClick && rowEl ? "#fafafa" : "Menu",
|
|
80
|
-
"&::after": index === 0
|
|
80
|
+
"&::after": index === 0 && rightShadowVisible
|
|
81
81
|
? {
|
|
82
82
|
position: "absolute",
|
|
83
83
|
top: 0,
|
|
84
84
|
left: 0,
|
|
85
85
|
bottom: "-1px",
|
|
86
86
|
width: "20px",
|
|
87
|
-
transform: "translateX(100%)",
|
|
87
|
+
transform: "translateX(-100%)",
|
|
88
88
|
transition: "box-shadow .3s",
|
|
89
89
|
content: "''",
|
|
90
90
|
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
package/DataTable/TableFooter.js
CHANGED
|
@@ -17,7 +17,7 @@ import TableCell from "@mui/material/TableCell";
|
|
|
17
17
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
18
|
import useTheme from "@mui/material/styles/useTheme";
|
|
19
19
|
function TableFooter(props) {
|
|
20
|
-
var footers = props.footers;
|
|
20
|
+
var footers = props.footers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
23
|
var fixedLeftFooters = isUpMd
|
|
@@ -28,18 +28,18 @@ function TableFooter(props) {
|
|
|
28
28
|
: [];
|
|
29
29
|
var dynamicFooters = isUpMd ? footers.filter(function (f) { return !f.fixable; }) : footers;
|
|
30
30
|
return (_jsx(Footer, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
|
|
31
|
-
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.
|
|
31
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
|
|
32
32
|
var left = fixedLeftFooters
|
|
33
33
|
.slice(0, index)
|
|
34
34
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
35
|
-
return (_jsx(TableCell, __assign({ align: align,
|
|
35
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
36
36
|
position: "sticky",
|
|
37
37
|
backgroundColor: "#eaf0f6",
|
|
38
38
|
zIndex: 10,
|
|
39
39
|
left: left,
|
|
40
40
|
width: width,
|
|
41
41
|
userSelect: "none",
|
|
42
|
-
"&::after": index === fixedLeftFooters.length - 1
|
|
42
|
+
"&::after": index === fixedLeftFooters.length - 1 && leftShadowVisible
|
|
43
43
|
? {
|
|
44
44
|
position: "absolute",
|
|
45
45
|
top: 0,
|
|
@@ -54,38 +54,32 @@ function TableFooter(props) {
|
|
|
54
54
|
: undefined
|
|
55
55
|
} }, { children: cloneElement(Cell) }), accessor));
|
|
56
56
|
}), dynamicFooters.map(function (footer) {
|
|
57
|
-
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.
|
|
58
|
-
return (_jsx(TableCell, __assign({ align: align,
|
|
57
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
|
|
58
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
59
59
|
zIndex: 9,
|
|
60
60
|
width: width,
|
|
61
|
-
whiteSpace: "nowrap",
|
|
62
|
-
textOverflow: "ellipsis",
|
|
63
|
-
overflow: "hidden",
|
|
64
61
|
userSelect: "none"
|
|
65
62
|
} }, { children: cloneElement(Cell) }), accessor));
|
|
66
63
|
}), fixedRightFooters.map(function (footer, index) {
|
|
67
|
-
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.
|
|
64
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
|
|
68
65
|
var right = fixedRightFooters
|
|
69
66
|
.slice(0, fixedRightFooters.length - 1 - index)
|
|
70
67
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
71
|
-
return (_jsx(TableCell, __assign({ align: align,
|
|
68
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
72
69
|
position: "sticky",
|
|
73
70
|
zIndex: 10,
|
|
74
71
|
width: width,
|
|
75
72
|
right: right,
|
|
76
73
|
backgroundColor: "#eaf0f6",
|
|
77
|
-
whiteSpace: "nowrap",
|
|
78
|
-
textOverflow: "ellipsis",
|
|
79
|
-
overflow: "hidden",
|
|
80
74
|
userSelect: "none",
|
|
81
|
-
"&::after": index === 0
|
|
75
|
+
"&::after": index === 0 && rightShadowVisible
|
|
82
76
|
? {
|
|
83
77
|
position: "absolute",
|
|
84
78
|
top: 0,
|
|
85
79
|
left: 0,
|
|
86
80
|
bottom: "-1px",
|
|
87
81
|
width: "20px",
|
|
88
|
-
transform: "translateX(100%)",
|
|
82
|
+
transform: "translateX(-100%)",
|
|
89
83
|
transition: "box-shadow .3s",
|
|
90
84
|
content: "''",
|
|
91
85
|
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
package/DataTable/TableHeader.js
CHANGED
|
@@ -17,7 +17,7 @@ import TableCell from "@mui/material/TableCell";
|
|
|
17
17
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
18
|
import useTheme from "@mui/material/styles/useTheme";
|
|
19
19
|
function TableHeader(props) {
|
|
20
|
-
var headers = props.headers;
|
|
20
|
+
var headers = props.headers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
23
|
var fixedLeftHeaders = isUpMd
|
|
@@ -28,11 +28,11 @@ function TableHeader(props) {
|
|
|
28
28
|
: [];
|
|
29
29
|
var dynamicHeaders = isUpMd ? headers.filter(function (h) { return !h.fixable; }) : headers;
|
|
30
30
|
return (_jsx(TableHead, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
|
|
31
|
-
var accessor = header.accessor, Cell = header.Cell, _a = header.
|
|
31
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
|
|
32
32
|
var left = fixedLeftHeaders
|
|
33
33
|
.slice(0, index)
|
|
34
34
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
35
|
-
return (_jsx(TableCell, __assign({ title: title, align: align,
|
|
35
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
|
|
36
36
|
position: "sticky",
|
|
37
37
|
backgroundColor: "#eaf0f6",
|
|
38
38
|
zIndex: 10,
|
|
@@ -40,7 +40,7 @@ function TableHeader(props) {
|
|
|
40
40
|
left: left,
|
|
41
41
|
userSelect: "none",
|
|
42
42
|
cursor: sortable ? "pointer" : "default",
|
|
43
|
-
"&::after": index === fixedLeftHeaders.length - 1
|
|
43
|
+
"&::after": index === fixedLeftHeaders.length - 1 && leftShadowVisible
|
|
44
44
|
? {
|
|
45
45
|
position: "absolute",
|
|
46
46
|
top: 0,
|
|
@@ -57,42 +57,36 @@ function TableHeader(props) {
|
|
|
57
57
|
onSort({ accessor: accessor });
|
|
58
58
|
} }, { children: cloneElement(Cell) }), accessor));
|
|
59
59
|
}), dynamicHeaders.map(function (header) {
|
|
60
|
-
var accessor = header.accessor, Cell = header.Cell, _a = header.
|
|
61
|
-
return (_jsx(TableCell, __assign({ title: title, align: align,
|
|
60
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
|
|
61
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
|
|
62
62
|
width: width,
|
|
63
63
|
zIndex: 9,
|
|
64
|
-
whiteSpace: "nowrap",
|
|
65
|
-
textOverflow: "ellipsis",
|
|
66
|
-
overflow: "hidden",
|
|
67
64
|
userSelect: "none",
|
|
68
65
|
cursor: sortable ? "pointer" : "default"
|
|
69
66
|
}, onClick: function () {
|
|
70
67
|
onSort({ accessor: accessor });
|
|
71
68
|
} }, { children: cloneElement(Cell) }), accessor));
|
|
72
69
|
}), fixedRightHeaders.map(function (header, index) {
|
|
73
|
-
var accessor = header.accessor, Cell = header.Cell, _a = header.
|
|
70
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
|
|
74
71
|
var right = fixedRightHeaders
|
|
75
72
|
.slice(0, fixedRightHeaders.length - 1 - index)
|
|
76
73
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
77
|
-
return (_jsx(TableCell, __assign({ title: title, align: align,
|
|
74
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
|
|
78
75
|
position: "sticky",
|
|
79
76
|
backgroundColor: "#eaf0f6",
|
|
80
77
|
zIndex: 10,
|
|
81
78
|
width: width,
|
|
82
79
|
right: right,
|
|
83
|
-
whiteSpace: "nowrap",
|
|
84
|
-
textOverflow: "ellipsis",
|
|
85
|
-
overflow: "hidden",
|
|
86
80
|
userSelect: "none",
|
|
87
81
|
cursor: sortable ? "pointer" : "default",
|
|
88
|
-
"&::after": index === 0
|
|
82
|
+
"&::after": index === 0 && rightShadowVisible
|
|
89
83
|
? {
|
|
90
84
|
position: "absolute",
|
|
91
85
|
top: 0,
|
|
92
86
|
left: 0,
|
|
93
87
|
bottom: "-1px",
|
|
94
88
|
width: "20px",
|
|
95
|
-
transform: "translateX(100%)",
|
|
89
|
+
transform: "translateX(-100%)",
|
|
96
90
|
transition: "box-shadow .3s",
|
|
97
91
|
content: "''",
|
|
98
92
|
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
package/DataTable/index.js
CHANGED
|
@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
13
14
|
import Table from "@mui/material/Table";
|
|
14
15
|
import TableContainer from "@mui/material/TableContainer";
|
|
15
16
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
@@ -20,13 +21,45 @@ import TableFooter from "./TableFooter";
|
|
|
20
21
|
function DataTable(props) {
|
|
21
22
|
var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
|
|
22
23
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
23
|
-
|
|
24
|
+
var tableRef = useRef(null);
|
|
25
|
+
var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
|
|
26
|
+
var _g = useState(false), rightShadowVisible = _g[0], setRightShadowVisible = _g[1];
|
|
27
|
+
var onProcessShadowVisible = useCallback(function () {
|
|
28
|
+
if (tableRef.current) {
|
|
29
|
+
var target = tableRef.current;
|
|
30
|
+
var scrollLeft = target.scrollLeft;
|
|
31
|
+
var scrollWidth = target.scrollWidth;
|
|
32
|
+
var clientWidth = target.clientWidth;
|
|
33
|
+
var hasScrollBar = scrollWidth > clientWidth;
|
|
34
|
+
console.log({
|
|
35
|
+
target: target,
|
|
36
|
+
scrollLeft: scrollLeft,
|
|
37
|
+
scrollWidth: scrollWidth,
|
|
38
|
+
clientWidth: clientWidth,
|
|
39
|
+
hasScrollBar: hasScrollBar
|
|
40
|
+
});
|
|
41
|
+
setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
|
|
42
|
+
setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft !== clientWidth);
|
|
43
|
+
}
|
|
44
|
+
}, []);
|
|
45
|
+
useEffect(function () {
|
|
46
|
+
if (columns) {
|
|
47
|
+
onProcessShadowVisible();
|
|
48
|
+
}
|
|
49
|
+
}, [columns, onProcessShadowVisible]);
|
|
50
|
+
useEffect(function () {
|
|
51
|
+
window.addEventListener("resize", onProcessShadowVisible);
|
|
52
|
+
}, [onProcessShadowVisible]);
|
|
53
|
+
useEffect(function () { return function () {
|
|
54
|
+
window.removeEventListener("scroll", onProcessShadowVisible);
|
|
55
|
+
}; }, [onProcessShadowVisible]);
|
|
56
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
|
|
24
57
|
borderWidth: "thin",
|
|
25
58
|
borderColor: "#e5e5e5",
|
|
26
59
|
borderStyle: "solid",
|
|
27
60
|
borderRadius: "4px",
|
|
28
61
|
borderCollapse: "unset !important"
|
|
29
|
-
} }, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick })] })), footers.length > 0 ? _jsx(TableFooter, { footers: footers }) : _jsx(_Fragment, {})] })) })));
|
|
62
|
+
} }, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })] })), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })));
|
|
30
63
|
}
|
|
31
64
|
export default DataTable;
|
|
32
65
|
export { default as useDataTable } from "./useTable";
|
package/DataTable/types.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ declare type InitialStateProps = {
|
|
|
10
10
|
};
|
|
11
11
|
export declare type ColumnProps = {
|
|
12
12
|
headerTip?: string;
|
|
13
|
-
disablePadding?: boolean;
|
|
14
13
|
Header: ReactElement;
|
|
15
14
|
Body: ReactElement;
|
|
16
15
|
Footer?: ReactElement;
|
|
@@ -28,15 +27,15 @@ export declare type UseTableBaseProps<RowProps extends KvProps> = {
|
|
|
28
27
|
onSort?: (props: SortingProps) => unknown;
|
|
29
28
|
};
|
|
30
29
|
export declare type UseTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = UseTableBaseProps<RowProps> & ExtendedProps;
|
|
31
|
-
export declare type TableHeaderCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"
|
|
30
|
+
export declare type TableHeaderCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
|
|
32
31
|
Cell: ReactElement;
|
|
33
32
|
title: string;
|
|
34
33
|
onSort: ({ accessor }: Pick<SortingProps, "accessor">) => unknown;
|
|
35
34
|
};
|
|
36
|
-
export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"
|
|
35
|
+
export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
|
|
37
36
|
Cell: ReactElement;
|
|
38
37
|
};
|
|
39
|
-
export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"
|
|
38
|
+
export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
|
|
40
39
|
Cell: ReactElement;
|
|
41
40
|
};
|
|
42
41
|
export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
@@ -47,10 +46,14 @@ export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps ext
|
|
|
47
46
|
};
|
|
48
47
|
export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
49
48
|
headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
|
|
49
|
+
leftShadowVisible?: boolean;
|
|
50
|
+
rightShadowVisible?: boolean;
|
|
50
51
|
};
|
|
51
52
|
export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
52
53
|
columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
|
|
53
54
|
rows: Array<RowProps>;
|
|
55
|
+
leftShadowVisible?: boolean;
|
|
56
|
+
rightShadowVisible?: boolean;
|
|
54
57
|
noDataText?: string;
|
|
55
58
|
onRowClick?: (row: RowProps) => unknown;
|
|
56
59
|
};
|
|
@@ -59,8 +62,10 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
|
|
|
59
62
|
};
|
|
60
63
|
export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
61
64
|
footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
|
|
65
|
+
leftShadowVisible?: boolean;
|
|
66
|
+
rightShadowVisible?: boolean;
|
|
62
67
|
};
|
|
63
|
-
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = TableHeaderProps<RowProps, ExtendedProps> & TableBodyProps<RowProps, ExtendedProps> & TableFooterProps<RowProps, ExtendedProps> & {
|
|
68
|
+
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & {
|
|
64
69
|
dense?: boolean;
|
|
65
70
|
stickyHeader?: boolean;
|
|
66
71
|
primaryColor?: CSSProperties["color"];
|
package/README.md
CHANGED
|
@@ -15,11 +15,12 @@
|
|
|
15
15
|
- [Autocomplete](#autocomplete)
|
|
16
16
|
- [AutocompleteWithFilter](#autocompletewithfilter)
|
|
17
17
|
- [BasicModal](#basicmodal)
|
|
18
|
-
- [BasicTable](#basictable)
|
|
18
|
+
- [BasicTable [⚠️Deprecated]](#basictable)
|
|
19
19
|
- [BreadCrumbs](#breadcrumbs)
|
|
20
20
|
- [CheckBox](#checkbox)
|
|
21
21
|
- [CheckBoxGroup](#checkboxgroup)
|
|
22
22
|
- [Copyright](#copyright)
|
|
23
|
+
- [DataTable](#datatable)
|
|
23
24
|
- [DateInput](#dateinput)
|
|
24
25
|
- [FullDateInput](#fulldateinput)
|
|
25
26
|
- [MonthDayInput](#monthdayinput)
|
|
@@ -206,6 +207,8 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
|
|
|
206
207
|
|
|
207
208
|
Reusable table component
|
|
208
209
|
|
|
210
|
+
⚠️ This component will be deprecated in the next release. Please use [`DataTable`](#datatable) instead.
|
|
211
|
+
|
|
209
212
|
<h5>Import</h5>
|
|
210
213
|
|
|
211
214
|
```tsx
|
|
@@ -343,6 +346,65 @@ import Copyright from '@symply.io/basic-components/Copyright';
|
|
|
343
346
|
|
|
344
347
|
|
|
345
348
|
|
|
349
|
+
<h3>DataTable</h3>
|
|
350
|
+
|
|
351
|
+
Reusable table component
|
|
352
|
+
|
|
353
|
+
<h5>Import</h5>
|
|
354
|
+
|
|
355
|
+
```tsx
|
|
356
|
+
import { DataTable, useDataTable } from '@symply.io/basic-components';
|
|
357
|
+
// or
|
|
358
|
+
import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
<h5>Column Props (ColumnProps)</h5>
|
|
362
|
+
|
|
363
|
+
| Name | Type | Default | Required | Description |
|
|
364
|
+
| --------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
|
|
365
|
+
| accessor | string | | true | The key of the column, it should be unique. |
|
|
366
|
+
| align | "left" \|"center" \|"right" | | false | The alignment of the column. |
|
|
367
|
+
| Body | ReactElement | | true | The component to render the column body cell. |
|
|
368
|
+
| fixable | "left" \| "right" \|undefined | | false | If not undefined, the column can be frozen. <br/>⚠️ It doesn't work with IE11. |
|
|
369
|
+
| Footer | ReactElement | | false | The component to render the column footer cell. |
|
|
370
|
+
| Header | ReactElement | | true | The component to render the column header cell. |
|
|
371
|
+
| headerTip | string | | false | The tip title text when the mouse is over the header. |
|
|
372
|
+
| sortable | bool | | false | If true, the column can be sortable. |
|
|
373
|
+
| width | number | | false | The fixed width of cells. |
|
|
374
|
+
|
|
375
|
+
<h5>Hook Props</h5>
|
|
376
|
+
|
|
377
|
+
| Name | Type | Default | Required | Description |
|
|
378
|
+
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
|
|
379
|
+
| columns | Array\<IColumn\> | | true | table columns |
|
|
380
|
+
| data | Array<{ [name]: unknown }> | | true | table data/rows |
|
|
381
|
+
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
|
|
382
|
+
| initialState | { sortBy?: SortByProps } | | false | Set the initial states |
|
|
383
|
+
| onSort | func | | false | The function for sorting rows. |
|
|
384
|
+
|
|
385
|
+
<h5>Hook Returns</h5>
|
|
386
|
+
|
|
387
|
+
| Name | Type | Description |
|
|
388
|
+
| ------- | -------------------- | ------------------------- |
|
|
389
|
+
| headers | Array\<IHeader\> | The cells for the header. |
|
|
390
|
+
| columns | Array\<IBodyColumn\> | The cells for the body. |
|
|
391
|
+
| footers | Array\<IFooter> | The cells for the footer. |
|
|
392
|
+
| rows | Array<IRow\> | The rows for the table. |
|
|
393
|
+
|
|
394
|
+
<h5>Component Props</h5>
|
|
395
|
+
|
|
396
|
+
| Name | Type | Default | Required | Description |
|
|
397
|
+
| ------------ | -------------------- | ---------- | -------- | ------------------------------------------------------- |
|
|
398
|
+
| headers | Array\<IHeader\> | | true | The cells for the header. (from the hook) |
|
|
399
|
+
| columns | Array\<IBodyColumn\> | | true | The cells for the body. (from the hook) |
|
|
400
|
+
| dense | bool | | false | If `true` the table size/density would be tight. |
|
|
401
|
+
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
|
402
|
+
| rows | Array<IRow\> | | true | The rows for the table. (from the hook) |
|
|
403
|
+
| stickyHeader | bool | | false | Set the header sticky.<br/>⚠️ It doesn't work with IE11. |
|
|
404
|
+
| footers | Array\<IFooter> | [] | false | The cells for the footer. (from the hook) |
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
|
|
346
408
|
<h3>DateInput</h3>
|
|
347
409
|
|
|
348
410
|
<h4>FullDateInput</h4>
|