@symply.io/basic-components 1.0.9 → 1.1.0
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/BasicTable/TableBody.js +4 -4
- package/BasicTable/TableBodyRow.js +3 -3
- package/BasicTable/index.js +3 -3
- package/BasicTable/types.d.ts +2 -0
- package/README.md +1 -0
- package/package.json +1 -1
package/BasicTable/TableBody.js
CHANGED
@@ -15,7 +15,7 @@ import Grid from "@mui/material/Grid";
|
|
15
15
|
import useTheme from "@mui/material/styles/useTheme";
|
16
16
|
import TableBodyRow from "./TableBodyRow";
|
17
17
|
function BasicTableBody(props, ref) {
|
18
|
-
var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
|
18
|
+
var rows = props.rows, columns = props.columns, rowHeight = props.rowHeight, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
|
19
19
|
var theme = useTheme();
|
20
20
|
return (_jsx(Grid, __assign({ item: true, sx: {
|
21
21
|
maxHeight: "41vh",
|
@@ -27,14 +27,14 @@ function BasicTableBody(props, ref) {
|
|
27
27
|
width: forFrozen ? 0 : "initial"
|
28
28
|
}
|
29
29
|
} }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
|
30
|
-
return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
|
30
|
+
return (_jsx(TableBodyRow, { row: row, rows: rows, rowHeight: rowHeight, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
|
31
31
|
})) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
|
32
|
-
height: theme.spacing(7.5),
|
32
|
+
height: rowHeight || theme.spacing(7.5),
|
33
33
|
borderBottomWidth: "thin",
|
34
34
|
borderBottomColor: "#e5e5e5",
|
35
35
|
borderBottomStyle: "solid",
|
36
36
|
padding: theme.spacing(0.5, 0),
|
37
|
-
minHeight: theme.spacing(
|
37
|
+
minHeight: theme.spacing(5),
|
38
38
|
"& :nth-of-last-type(1)": {
|
39
39
|
borderBottom: "none"
|
40
40
|
},
|
@@ -15,15 +15,15 @@ import colorAlpha from "color-alpha";
|
|
15
15
|
import Grid from "@mui/material/Grid";
|
16
16
|
import useTheme from "@mui/material/styles/useTheme";
|
17
17
|
function BasicTableBodyRow(props) {
|
18
|
-
var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, onRowClick = props.onRowClick;
|
18
|
+
var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, rowHeight = props.rowHeight, onRowClick = props.onRowClick;
|
19
19
|
var theme = useTheme();
|
20
20
|
return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
|
21
|
-
height: theme.spacing(7.5),
|
21
|
+
height: rowHeight || theme.spacing(7.5),
|
22
22
|
borderBottomWidth: "thin",
|
23
23
|
borderBottomColor: "#e5e5e5",
|
24
24
|
borderBottomStyle: "solid",
|
25
25
|
padding: theme.spacing(0.5, 0),
|
26
|
-
minHeight: theme.spacing(
|
26
|
+
minHeight: theme.spacing(5),
|
27
27
|
"&:hover": {
|
28
28
|
cursor: !forFrozen && onRowClick ? "pointer" : "default",
|
29
29
|
backgroundColor: !forFrozen && onRowClick
|
package/BasicTable/index.js
CHANGED
@@ -22,7 +22,7 @@ import TableHeader from "./TableHeader";
|
|
22
22
|
import TableFooter from "./TableFooter";
|
23
23
|
function BasicTable(props) {
|
24
24
|
var _a;
|
25
|
-
var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
|
25
|
+
var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rowHeight = props.rowHeight, onRowClick = props.onRowClick;
|
26
26
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
27
27
|
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
28
28
|
var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
|
@@ -63,7 +63,7 @@ function BasicTable(props) {
|
|
63
63
|
zIndex: 999,
|
64
64
|
backgroundColor: "Menu",
|
65
65
|
boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
|
66
|
-
} }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, onRowClick: onRowClick
|
66
|
+
} }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, rowHeight: rowHeight, onRowClick: onRowClick
|
67
67
|
? function (row) {
|
68
68
|
onRowClick(row);
|
69
69
|
}
|
@@ -73,7 +73,7 @@ function BasicTable(props) {
|
|
73
73
|
overflow: "auto"
|
74
74
|
} }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) {
|
75
75
|
return isUpMd ? !header.canBeFrozen : true;
|
76
|
-
}) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
|
76
|
+
}) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, rowHeight: rowHeight, noDataText: noDataText, columns: columns.filter(function (col) {
|
77
77
|
return isUpMd ? !col.canBeFrozen : true;
|
78
78
|
}), onRowClick: onRowClick
|
79
79
|
? function (row) {
|
package/BasicTable/types.d.ts
CHANGED
@@ -65,6 +65,7 @@ export interface BasicTableBodyProps<RowProps extends KvProps, ExtraProps extend
|
|
65
65
|
rows: Array<RowProps>;
|
66
66
|
noDataText?: string;
|
67
67
|
forFrozen?: boolean;
|
68
|
+
rowHeight?: CSSProperties["height"];
|
68
69
|
onRowClick?: (row: RowProps) => unknown;
|
69
70
|
}
|
70
71
|
export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps extends KvProps> {
|
@@ -72,6 +73,7 @@ export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps ext
|
|
72
73
|
rows: Array<RowProps>;
|
73
74
|
row: RowProps;
|
74
75
|
forFrozen?: boolean;
|
76
|
+
rowHeight?: CSSProperties["height"];
|
75
77
|
onRowClick?: (row: RowProps) => unknown;
|
76
78
|
}
|
77
79
|
export declare type BasicTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = BasicTableHeaderProps<RowProps, ExtraProps> & Omit<BasicTableBodyProps<RowProps, ExtraProps>, "forFrozen"> & Partial<BasicTableFooterProps<RowProps, ExtraProps>> & {
|
package/README.md
CHANGED
@@ -258,6 +258,7 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
258
258
|
| footers | Array\<FooterProps> | [] | false | The cells for the footer. (from the hook) |
|
259
259
|
| onRowClick | func | | false | The function for row clicking. |
|
260
260
|
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
261
|
+
| rowHeight | string \| number | 60 | false | The height of each row. |
|
261
262
|
| rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
|
262
263
|
|
263
264
|
|