@mrshmllw/smores-react 3.1.6 → 3.1.8
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/ActionDropdown/ActionDropdown.js +2 -2
- package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
- package/dist/Table/Table.d.ts +4 -2
- package/dist/Table/Table.js +13 -5
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/Table.stories.d.ts +5 -1
- package/dist/Table/Table.stories.js +41 -8
- package/dist/Table/Table.stories.js.map +1 -1
- package/dist/Table/components/RowActions.js +5 -5
- package/dist/Table/components/RowActions.js.map +1 -1
- package/dist/Table/components/TableHeader.d.ts +1 -1
- package/dist/Table/components/TableHeader.js +3 -3
- package/dist/Table/components/TableHeader.js.map +1 -1
- package/dist/Table/components/TableRow.d.ts +1 -1
- package/dist/Table/components/TableRow.js +7 -2
- package/dist/Table/components/TableRow.js.map +1 -1
- package/dist/Table/components/commonComponents.js +60 -4
- package/dist/Table/components/commonComponents.js.map +1 -1
- package/dist/Table/storyUtils.d.ts +22 -0
- package/dist/Table/storyUtils.js +5 -2
- package/dist/Table/storyUtils.js.map +1 -1
- package/dist/Table/types.d.ts +22 -4
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
|
-
import { Text } from '../Text';
|
|
5
4
|
import { Icon } from '../Icon';
|
|
5
|
+
import { Text } from '../Text';
|
|
6
6
|
import { List } from './List';
|
|
7
7
|
import { theme } from '../theme';
|
|
8
8
|
export const ActionDropdown = ({ id, className = '', label, value, list, onSelect, ...marginProps }) => {
|
|
@@ -56,7 +56,7 @@ const OuterContainer = styled.div(({ open }) => css `
|
|
|
56
56
|
max-height: ${open ? '235px' : '48px'};
|
|
57
57
|
background-color: ${theme.colors.custard};
|
|
58
58
|
overflow-y: ${open ? 'auto' : 'hidden'};
|
|
59
|
-
z-index:
|
|
59
|
+
z-index: 4;
|
|
60
60
|
transition: all 0.2s ease-in-out;
|
|
61
61
|
`);
|
|
62
62
|
//# sourceMappingURL=ActionDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,
|
|
1
|
+
{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAgBvC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW;QAEd,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,IAC1C,KAAK,CACD,CACR;QAED,oBAAC,KAAK,IACJ,IAAI,EAAE,KAAK,CAAC,SAAS,IAAI,WAAW,EACpC,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,QAAQ;YAE7B,oBAAC,cAAc,QAAE,KAAK,CAAC,KAAK,CAAkB;YAC9C,oBAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,QAAQ,EAClC,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACtB,CACI;QACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI;YACxB,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,CAChC,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACV,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;wBACP,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;;;;;;;;;;;;GAYrC,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAMjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;eAKJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;kBACpB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;wBACjB,KAAK,CAAC,MAAM,CAAC,OAAO;kBAC1B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;GAGvC,CACF,CAAA"}
|
package/dist/Table/Table.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ import { TableProps } from './types';
|
|
|
17
17
|
* @property {T[]} data - Array of data to be displayed in the table.
|
|
18
18
|
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
19
19
|
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
20
|
+
* @property {string} [headerHeight] - Sets the height of the header.
|
|
20
21
|
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
21
22
|
* @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
|
|
22
23
|
* @property {Color} [headerColor='mascarpone'] - The color for the table header.
|
|
@@ -28,6 +29,7 @@ import { TableProps } from './types';
|
|
|
28
29
|
* @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
|
|
29
30
|
* @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
|
|
30
31
|
* @property {string} [rowActionsMinWidth] - The minimum width for the row actions column.
|
|
31
|
-
* @property {string} [rowPadding] - The padding for each row, essentially the height
|
|
32
|
+
* @property {string} [rowPadding] - The padding for each row, essentially the height.
|
|
33
|
+
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
32
34
|
*/
|
|
33
|
-
export declare const Table: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerColor, rowColor, stripedColor, rowBorderColor, rowActions,
|
|
35
|
+
export declare const Table: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => JSX.Element;
|
package/dist/Table/Table.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Text } from '../Text';
|
|
2
3
|
import { TableHeader } from './components/TableHeader';
|
|
3
4
|
import { TableRow } from './components/TableRow';
|
|
4
|
-
import { StyledTable } from './components/commonComponents';
|
|
5
|
+
import { StyledCell, StyledTable } from './components/commonComponents';
|
|
5
6
|
/**
|
|
6
7
|
* A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
|
|
7
8
|
*
|
|
@@ -19,6 +20,7 @@ import { StyledTable } from './components/commonComponents';
|
|
|
19
20
|
* @property {T[]} data - Array of data to be displayed in the table.
|
|
20
21
|
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
21
22
|
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
23
|
+
* @property {string} [headerHeight] - Sets the height of the header.
|
|
22
24
|
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
23
25
|
* @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
|
|
24
26
|
* @property {Color} [headerColor='mascarpone'] - The color for the table header.
|
|
@@ -30,12 +32,18 @@ import { StyledTable } from './components/commonComponents';
|
|
|
30
32
|
* @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
|
|
31
33
|
* @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
|
|
32
34
|
* @property {string} [rowActionsMinWidth] - The minimum width for the row actions column.
|
|
33
|
-
* @property {string} [rowPadding] - The padding for each row, essentially the height
|
|
35
|
+
* @property {string} [rowPadding] - The padding for each row, essentially the height.
|
|
36
|
+
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
34
37
|
*/
|
|
35
|
-
export const Table = ({ columns, data, fixedHeader = true, expandable, subTable, subRows, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions,
|
|
38
|
+
export const Table = ({ columns, data, fixedHeader = true, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, rowPadding, columnPadding, noDataContent, }) => {
|
|
39
|
+
const showActionsCell = expandable || rowActions;
|
|
40
|
+
const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
|
|
36
41
|
return (React.createElement(StyledTable, null,
|
|
37
42
|
React.createElement("thead", null,
|
|
38
|
-
React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, subTable: subTable, headerColor: headerColor, rowActions: rowActions,
|
|
39
|
-
React.createElement("tbody", null,
|
|
43
|
+
React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable })),
|
|
44
|
+
React.createElement("tbody", null,
|
|
45
|
+
data.length === 0 && (React.createElement(StyledCell, { colSpan: expandSubProp, rowPadding: rowPadding, columnPadding: columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data")))),
|
|
46
|
+
data.length !== 0 &&
|
|
47
|
+
data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable }))))));
|
|
40
48
|
};
|
|
41
49
|
//# sourceMappingURL=Table.js.map
|
package/dist/Table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,UAAU,EACV,aAAa,EACb,aAAa,GACC,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACV;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,GACtB,CACI;QACR;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,IAE3B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,GACtB,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -2,13 +2,17 @@
|
|
|
2
2
|
import { TableProps } from './types';
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerColor, rowColor, stripedColor, rowBorderColor, rowActions,
|
|
5
|
+
component: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => JSX.Element;
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
8
8
|
export declare const Default: any;
|
|
9
9
|
export declare const BasicTable: any;
|
|
10
|
+
export declare const TrucateContent: any;
|
|
10
11
|
export declare const OverflowTable: any;
|
|
12
|
+
export declare const NoDataTable: any;
|
|
13
|
+
export declare const CustomNoDataTable: any;
|
|
11
14
|
export declare const StaticHeader: any;
|
|
15
|
+
export declare const ReallyLargeHeader: any;
|
|
12
16
|
export declare const RowPadding: any;
|
|
13
17
|
export declare const SubRows: any;
|
|
14
18
|
export declare const SubRowsShowOnExpand: any;
|
|
@@ -19,7 +19,7 @@ const Wrapper = styled(Box) `
|
|
|
19
19
|
export const Default = Template.bind({});
|
|
20
20
|
Default.args = {
|
|
21
21
|
rowPadding: '12px',
|
|
22
|
-
columns: columns,
|
|
22
|
+
columns: columns.slice(0, 6),
|
|
23
23
|
data,
|
|
24
24
|
fixedHeader: true,
|
|
25
25
|
};
|
|
@@ -29,12 +29,34 @@ BasicTable.args = {
|
|
|
29
29
|
columns: columns.slice(0, 3),
|
|
30
30
|
data,
|
|
31
31
|
};
|
|
32
|
+
export const TrucateContent = Template.bind({});
|
|
33
|
+
TrucateContent.args = {
|
|
34
|
+
rowPadding: '12px',
|
|
35
|
+
columns: columns,
|
|
36
|
+
data,
|
|
37
|
+
};
|
|
32
38
|
export const OverflowTable = TemplateWithWrapper.bind({});
|
|
33
39
|
OverflowTable.args = {
|
|
34
40
|
rowPadding: '12px',
|
|
35
41
|
columns: columns,
|
|
36
42
|
data,
|
|
37
43
|
};
|
|
44
|
+
export const NoDataTable = TemplateWithWrapper.bind({});
|
|
45
|
+
NoDataTable.args = {
|
|
46
|
+
rowPadding: '12px',
|
|
47
|
+
columns: columns.slice(0, 4),
|
|
48
|
+
data: [],
|
|
49
|
+
};
|
|
50
|
+
const BorderBox = styled(Box) `
|
|
51
|
+
border: 1px dashed ${theme.colors.oatmeal};
|
|
52
|
+
`;
|
|
53
|
+
export const CustomNoDataTable = TemplateWithWrapper.bind({});
|
|
54
|
+
CustomNoDataTable.args = {
|
|
55
|
+
rowPadding: '0px',
|
|
56
|
+
columns: columns.slice(0, 5),
|
|
57
|
+
data: [],
|
|
58
|
+
noDataContent: (React.createElement(BorderBox, { flex: true, justifyContent: "center", my: "24px", p: "48px" }, "No data")),
|
|
59
|
+
};
|
|
38
60
|
export const StaticHeader = TemplateWithWrapper.bind({});
|
|
39
61
|
StaticHeader.args = {
|
|
40
62
|
rowPadding: '12px',
|
|
@@ -42,6 +64,14 @@ StaticHeader.args = {
|
|
|
42
64
|
data,
|
|
43
65
|
fixedHeader: false,
|
|
44
66
|
};
|
|
67
|
+
export const ReallyLargeHeader = TemplateWithWrapper.bind({});
|
|
68
|
+
ReallyLargeHeader.args = {
|
|
69
|
+
rowPadding: '12px',
|
|
70
|
+
headerHeight: '120px',
|
|
71
|
+
columns: columns,
|
|
72
|
+
data,
|
|
73
|
+
fixedHeader: false,
|
|
74
|
+
};
|
|
45
75
|
export const RowPadding = Template.bind({});
|
|
46
76
|
RowPadding.args = {
|
|
47
77
|
rowPadding: '0px',
|
|
@@ -69,7 +99,7 @@ SubRowsShowOnExpand.args = {
|
|
|
69
99
|
rowPadding: '12px',
|
|
70
100
|
columns: columns.slice(0, 4),
|
|
71
101
|
data,
|
|
72
|
-
expandable: () =>
|
|
102
|
+
expandable: (row) => !!row.subRowData,
|
|
73
103
|
subRows: {
|
|
74
104
|
rows: (row) => {
|
|
75
105
|
if (!row.subRowData)
|
|
@@ -90,7 +120,7 @@ SubTable.args = {
|
|
|
90
120
|
expandable: () => true,
|
|
91
121
|
subTable: {
|
|
92
122
|
table: () => {
|
|
93
|
-
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: rowActions }));
|
|
123
|
+
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: { actions: rowActions } }));
|
|
94
124
|
},
|
|
95
125
|
showOnExpand: () => true,
|
|
96
126
|
},
|
|
@@ -104,11 +134,11 @@ RowActions.args = {
|
|
|
104
134
|
expandable: () => true,
|
|
105
135
|
subTable: {
|
|
106
136
|
table: () => {
|
|
107
|
-
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: rowActions }));
|
|
137
|
+
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: { actions: rowActions } }));
|
|
108
138
|
},
|
|
109
139
|
showOnExpand: () => true,
|
|
110
140
|
},
|
|
111
|
-
rowActions: rowActions,
|
|
141
|
+
rowActions: { actions: rowActions, bgColor: 'strawberry' },
|
|
112
142
|
};
|
|
113
143
|
export const EverythingTable = TemplateWithWrapper.bind({});
|
|
114
144
|
EverythingTable.args = {
|
|
@@ -117,7 +147,7 @@ EverythingTable.args = {
|
|
|
117
147
|
expandable: () => true,
|
|
118
148
|
subTable: {
|
|
119
149
|
table: () => {
|
|
120
|
-
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: rowActions }));
|
|
150
|
+
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: { actions: rowActions } }));
|
|
121
151
|
},
|
|
122
152
|
showOnExpand: () => true,
|
|
123
153
|
},
|
|
@@ -126,14 +156,17 @@ EverythingTable.args = {
|
|
|
126
156
|
if (!row.subRowData)
|
|
127
157
|
return;
|
|
128
158
|
return row.subRowData.map((row, rowIndex) => {
|
|
129
|
-
return (React.createElement(TableRow, { key: rowIndex, rowIndex: rowIndex, rowData: row, columns: columns, rowColor: "cream", rowBorderColor: "chia", rowActions: rowActions }));
|
|
159
|
+
return (React.createElement(TableRow, { key: rowIndex, rowIndex: rowIndex, rowData: row, columns: columns, rowColor: "cream", rowBorderColor: "chia", rowActions: { actions: rowActions } }));
|
|
130
160
|
});
|
|
131
161
|
},
|
|
132
162
|
showOnExpand: () => false,
|
|
133
163
|
},
|
|
134
164
|
rowColor: 'custard',
|
|
135
165
|
headerColor: 'mascarpone',
|
|
136
|
-
rowActions:
|
|
166
|
+
rowActions: {
|
|
167
|
+
actions: rowActions,
|
|
168
|
+
bgColor: 'custard',
|
|
169
|
+
},
|
|
137
170
|
rowPadding: '4px',
|
|
138
171
|
};
|
|
139
172
|
//# sourceMappingURL=Table.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.js","sourceRoot":"","sources":["../../src/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAW,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG5E,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;CACjB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,oBAAC,KAAK,OAAK,KAAK,GAAI,CAAA;AAErE,MAAM,mBAAmB,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC1D,oBAAC,OAAO,IAAC,MAAM,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM;IAC/B,oBAAC,KAAK,OAAK,KAAK,GAAI,CACZ,CACX,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;gBACX,KAAK,CAAC,MAAM,CAAC,SAAS;;CAErC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"Table.stories.js","sourceRoot":"","sources":["../../src/Table/Table.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,19 +7,19 @@ import { focusOutlineStyle } from '../../utils/focusOutline';
|
|
|
7
7
|
import { isReactElement } from '../helpers';
|
|
8
8
|
import { StyledCell } from './commonComponents';
|
|
9
9
|
export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
|
|
10
|
-
return (React.createElement(StyledCell, { stickyCell: Boolean(rowActions) || Boolean(expandable) },
|
|
10
|
+
return (React.createElement(StyledCell, { stickyCell: Boolean(rowActions) || Boolean(expandable), rowActionsBgColor: rowActions?.bgColor },
|
|
11
11
|
React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-end" },
|
|
12
12
|
rowActions &&
|
|
13
|
-
rowActions?.map((action, actionIndex) => {
|
|
13
|
+
rowActions.actions?.map((action, actionIndex) => {
|
|
14
14
|
if (!action.showCondition || action.showCondition(rowData)) {
|
|
15
15
|
return (React.createElement(Wrapper, { flex: true, key: actionIndex },
|
|
16
|
-
isReactElement(action.
|
|
17
|
-
React.cloneElement(action.
|
|
16
|
+
isReactElement(action.element) &&
|
|
17
|
+
React.cloneElement(action.element, {
|
|
18
18
|
onClick: () => action.onClick(rowData),
|
|
19
19
|
tabIndex: 0,
|
|
20
20
|
className: 'reactElementRowAction',
|
|
21
21
|
}),
|
|
22
|
-
action.genericButton && !isReactElement(action.
|
|
22
|
+
action.genericButton && !isReactElement(action.element) && (React.createElement(Button, { ...action.genericButton, handleClick: () => action.onClick(rowData) }, action.genericButton.children)),
|
|
23
23
|
action.iconButton && (React.createElement(IconStrict, { ...action.iconButton, handleClick: () => action.onClick(rowData) }))));
|
|
24
24
|
}
|
|
25
25
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAmB,EAC3C,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,eAAe,GACI,EAAE,EAAE;IACvB,OAAO,CACL,oBAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAmB,EAC3C,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,eAAe,GACI,EAAE,EAAE;IACvB,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,EACtD,iBAAiB,EAAE,UAAU,EAAE,OAAO;QAEtC,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,UAAU;YACpD,UAAU;gBACT,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;oBAC9C,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;wBAC1D,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,QAAC,GAAG,EAAE,WAAW;4BAC3B,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;gCAC7B,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE;oCACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;oCACtC,QAAQ,EAAE,CAAC;oCACX,SAAS,EAAE,uBAAuB;iCACnC,CAAC;4BACH,MAAM,CAAC,aAAa,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAC1D,oBAAC,MAAM,OACD,MAAM,CAAC,aAAa,EACxB,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAEzC,MAAM,CAAC,aAAa,CAAC,QAAQ,CACvB,CACV;4BACA,MAAM,CAAC,UAAU,IAAI,CACpB,oBAAC,UAAU,OACL,MAAM,CAAC,UAAU,EACrB,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAC1C,CACH,CACO,CACX,CAAA;qBACF;oBACD,OAAO,IAAI,CAAA;gBACb,CAAC,CAAC;YACH,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,IAAI,CACpC,oBAAC,SAAS,IACR,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE,EACpC,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,UAAU,EAClB,eAAe,EAAC,OAAO,GACvB,CACH,CACG,CACK,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;MAUrB,iBAAiB;;CAEtB,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;iBACD,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc;;GAEvD,CACF,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableHeaderProps } from '../types';
|
|
3
|
-
export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions,
|
|
3
|
+
export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, }: TableHeaderProps<T>) => JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyledHeaderCell, StyledRow } from './commonComponents';
|
|
3
|
-
export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions,
|
|
3
|
+
export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, }) => {
|
|
4
4
|
return (React.createElement(StyledRow, null,
|
|
5
|
-
columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, fixedHeader: fixedHeader, minWidth: column.minWidth, headerColor: headerColor }, column.name))),
|
|
6
|
-
(expandable || rowActions) && (React.createElement(StyledHeaderCell, { fixedHeader: fixedHeader, stickyCell: true, minWidth:
|
|
5
|
+
columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, fixedHeader: fixedHeader, headerHeight: headerHeight, minWidth: column.minWidth, maxWidth: column.maxWidth, headerColor: headerColor, columnPadding: columnPadding }, column.name))),
|
|
6
|
+
(expandable || rowActions) && (React.createElement(StyledHeaderCell, { fixedHeader: fixedHeader, stickyCell: true, minWidth: rowActions?.minWidth, headerColor: headerColor, columnPadding: columnPadding }, "Actions"))));
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,UAAU,GACU,EAAE,EAAE;IACxB,OAAO,CACL,oBAAC,SAAS;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,IAE3B,MAAM,CAAC,IAAI,CACK,CACpB,CAAC;QACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAC7B,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,cAGX,CACpB,CACS,CACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableRowProps } from '../types';
|
|
3
|
-
export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, showActions, expandable, }: TableRowProps<T>) => JSX.Element;
|
|
3
|
+
export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, }: TableRowProps<T>) => JSX.Element;
|
|
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import { isMappedReactElement, isReactElement } from '../helpers';
|
|
3
3
|
import { RowActions } from './RowActions';
|
|
4
4
|
import { StyledCell, StyledRow } from './commonComponents';
|
|
5
|
-
export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, showActions, expandable, }) => {
|
|
5
|
+
export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, }) => {
|
|
6
6
|
const [expandedRows, setExpandedRows] = useState([]);
|
|
7
7
|
const toggleRowExpansion = (rowIndex) => {
|
|
8
8
|
setExpandedRows((prevState) => prevState.includes(rowIndex)
|
|
@@ -22,7 +22,7 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
|
|
|
22
22
|
if (column.cell) {
|
|
23
23
|
cellContent = column.cell(rowData, rowIndex, column, rowIndex);
|
|
24
24
|
}
|
|
25
|
-
return (React.createElement(StyledCell, { key: columnIndex, rowPadding: rowPadding }, cellContent));
|
|
25
|
+
return (React.createElement(StyledCell, { key: columnIndex, rowPadding: rowPadding, columnPadding: columnPadding, minWidth: column.minWidth, maxWidth: column.maxWidth, noWrapContent: column.noWrapContent, truncateContent: column.truncateContent, hideOverflow: column.hideOverflow }, cellContent));
|
|
26
26
|
}),
|
|
27
27
|
(showActionsCell || showActions) && (React.createElement(RowActions, { expandable: expandable, rowActions: rowActions, rowData: rowData, isExpanded: expandedRows.includes(rowIndex), toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
|
|
28
28
|
expandedRows.includes(rowIndex) && (React.createElement(React.Fragment, null,
|
|
@@ -32,6 +32,7 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
|
|
|
32
32
|
isReactElement(subRowsData) &&
|
|
33
33
|
React.cloneElement(subRowsData, {
|
|
34
34
|
rowPadding: rowPadding,
|
|
35
|
+
columnPadding: columnPadding,
|
|
35
36
|
}),
|
|
36
37
|
subRows &&
|
|
37
38
|
subRowsData &&
|
|
@@ -43,6 +44,7 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
|
|
|
43
44
|
})),
|
|
44
45
|
subTable && showSubTableOnExpand && subTableData && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
|
|
45
46
|
rowPadding: rowPadding,
|
|
47
|
+
columnPadding: columnPadding,
|
|
46
48
|
}))))),
|
|
47
49
|
subRows &&
|
|
48
50
|
subRowsData &&
|
|
@@ -50,6 +52,7 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
|
|
|
50
52
|
isReactElement(subRowsData) &&
|
|
51
53
|
React.cloneElement(subRowsData, {
|
|
52
54
|
rowPadding: rowPadding,
|
|
55
|
+
columnPadding: columnPadding,
|
|
53
56
|
}),
|
|
54
57
|
subRows &&
|
|
55
58
|
subRowsData &&
|
|
@@ -57,9 +60,11 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
|
|
|
57
60
|
isMappedReactElement(subRowsData) &&
|
|
58
61
|
subRowsData.map((row) => React.cloneElement(row, {
|
|
59
62
|
rowPadding: rowPadding,
|
|
63
|
+
columnPadding: columnPadding,
|
|
60
64
|
})),
|
|
61
65
|
subTable && subTableData && !showSubTableOnExpand && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
|
|
62
66
|
rowPadding: rowPadding,
|
|
67
|
+
columnPadding: columnPadding,
|
|
63
68
|
})))));
|
|
64
69
|
};
|
|
65
70
|
//# sourceMappingURL=TableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2B,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAmB,EACzC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,GACO,EAAE,EAAE;IACrB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAE9D,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC9C,eAAe,CAAC,CAAC,SAAS,EAAE,EAAE,CAC5B,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAC1B,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC;YACjD,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAC7B,CAAA;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,YAAY,GAAG,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,mBAAmB,GACvB,OAAO,EAAE,YAAY,IAAI,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IACzD,MAAM,oBAAoB,GACxB,QAAQ,EAAE,YAAY,IAAI,QAAQ,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAE3D,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAE3E,OAAO,CACL;QACE,oBAAC,SAAS,IACR,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc;YAE7B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;gBACnC,IAAI,WAAsB,CAAA;gBAC1B,IAAI,MAAM,CAAC,IAAI,EAAE;oBACf,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;iBAC/D;gBAED,OAAO,CACL,oBAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { fontStyleMapping } from '../../Text/fontMapping';
|
|
|
3
3
|
import { theme } from '../../theme';
|
|
4
4
|
export const StyledTable = styled.table `
|
|
5
5
|
width: 100%;
|
|
6
|
+
height: 100%;
|
|
6
7
|
border-collapse: collapse;
|
|
7
8
|
overflow: auto;
|
|
8
9
|
background: ${theme.colors.coconut};
|
|
@@ -15,23 +16,61 @@ export const StyledHeaderCell = styled.th `
|
|
|
15
16
|
z-index: 2;
|
|
16
17
|
text-align: left;
|
|
17
18
|
vertical-align: bottom;
|
|
18
|
-
padding: 8px;
|
|
19
19
|
${fontStyleMapping['label']};
|
|
20
|
+
padding-left: 8px;
|
|
21
|
+
padding-right: 8px;
|
|
22
|
+
padding-top: 8px;
|
|
23
|
+
padding-bottom: 8px;
|
|
20
24
|
|
|
21
25
|
${({ headerColor }) => headerColor &&
|
|
22
26
|
css `
|
|
23
27
|
background: ${theme.colors[headerColor]};
|
|
24
28
|
`}
|
|
25
29
|
|
|
30
|
+
${({ headerHeight }) => headerHeight &&
|
|
31
|
+
css `
|
|
32
|
+
height: ${headerHeight};
|
|
33
|
+
`}
|
|
34
|
+
|
|
35
|
+
${({ maxWidth }) => maxWidth &&
|
|
36
|
+
css `
|
|
37
|
+
max-width: ${maxWidth};
|
|
38
|
+
`}
|
|
39
|
+
|
|
26
40
|
${({ minWidth }) => minWidth &&
|
|
27
41
|
css `
|
|
28
42
|
min-width: ${minWidth};
|
|
29
43
|
`}
|
|
44
|
+
|
|
45
|
+
${({ columnPadding }) => columnPadding &&
|
|
46
|
+
css `
|
|
47
|
+
padding-left: ${columnPadding};
|
|
48
|
+
padding-right: ${columnPadding};
|
|
49
|
+
`};
|
|
30
50
|
`;
|
|
31
51
|
export const StyledCell = styled.td `
|
|
32
|
-
padding: 8px;
|
|
33
52
|
vertical-align: middle;
|
|
34
|
-
|
|
53
|
+
padding-left: 8px;
|
|
54
|
+
padding-right: 8px;
|
|
55
|
+
padding-top: 8px;
|
|
56
|
+
padding-bottom: 8px;
|
|
57
|
+
|
|
58
|
+
${({ hideOverflow }) => hideOverflow &&
|
|
59
|
+
css `
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
`};
|
|
62
|
+
|
|
63
|
+
${({ noWrapContent }) => noWrapContent &&
|
|
64
|
+
css `
|
|
65
|
+
white-space: nowrap;
|
|
66
|
+
`};
|
|
67
|
+
|
|
68
|
+
${({ truncateContent }) => truncateContent &&
|
|
69
|
+
css `
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
text-overflow: ellipsis;
|
|
73
|
+
`};
|
|
35
74
|
|
|
36
75
|
${({ stickyCell }) => stickyCell &&
|
|
37
76
|
css `
|
|
@@ -41,8 +80,25 @@ export const StyledCell = styled.td `
|
|
|
41
80
|
|
|
42
81
|
${({ rowPadding }) => rowPadding &&
|
|
43
82
|
css `
|
|
44
|
-
padding: ${rowPadding};
|
|
83
|
+
padding-top: ${rowPadding};
|
|
84
|
+
padding-bottom: ${rowPadding};
|
|
85
|
+
`};
|
|
86
|
+
|
|
87
|
+
${({ columnPadding }) => columnPadding &&
|
|
88
|
+
css `
|
|
89
|
+
padding-left: ${columnPadding};
|
|
90
|
+
padding-right: ${columnPadding};
|
|
45
91
|
`};
|
|
92
|
+
|
|
93
|
+
${({ maxWidth }) => maxWidth &&
|
|
94
|
+
css `
|
|
95
|
+
max-width: ${maxWidth};
|
|
96
|
+
`}
|
|
97
|
+
|
|
98
|
+
${({ rowActionsBgColor }) => rowActionsBgColor &&
|
|
99
|
+
css `
|
|
100
|
+
background: ${theme.colors[rowActionsBgColor]};
|
|
101
|
+
`}
|
|
46
102
|
`;
|
|
47
103
|
export const StyledRow = styled.tr `
|
|
48
104
|
background: ${theme.colors.custard};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAGnC,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB
|
|
1
|
+
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,22 +14,44 @@ export declare const columns: ({
|
|
|
14
14
|
name: string;
|
|
15
15
|
cell: (row: DataRow) => number;
|
|
16
16
|
minWidth: string;
|
|
17
|
+
maxWidth?: undefined;
|
|
18
|
+
truncateContent?: undefined;
|
|
17
19
|
} | {
|
|
18
20
|
name: JSX.Element;
|
|
19
21
|
cell: (row: DataRow) => string;
|
|
20
22
|
minWidth: string;
|
|
23
|
+
maxWidth?: undefined;
|
|
24
|
+
truncateContent?: undefined;
|
|
21
25
|
} | {
|
|
22
26
|
name: JSX.Element;
|
|
23
27
|
cell: (row: DataRow) => JSX.Element;
|
|
24
28
|
minWidth: string;
|
|
29
|
+
maxWidth?: undefined;
|
|
30
|
+
truncateContent?: undefined;
|
|
25
31
|
} | {
|
|
26
32
|
name: string;
|
|
27
33
|
cell: (row: DataRow) => JSX.Element;
|
|
28
34
|
minWidth?: undefined;
|
|
35
|
+
maxWidth?: undefined;
|
|
36
|
+
truncateContent?: undefined;
|
|
37
|
+
} | {
|
|
38
|
+
name: string;
|
|
39
|
+
cell: (row: DataRow) => JSX.Element;
|
|
40
|
+
minWidth: string;
|
|
41
|
+
maxWidth: string;
|
|
42
|
+
truncateContent?: undefined;
|
|
29
43
|
} | {
|
|
30
44
|
name: string;
|
|
31
45
|
cell: () => string;
|
|
32
46
|
minWidth: string;
|
|
47
|
+
maxWidth?: undefined;
|
|
48
|
+
truncateContent?: undefined;
|
|
49
|
+
} | {
|
|
50
|
+
name: string;
|
|
51
|
+
cell: () => string;
|
|
52
|
+
maxWidth: string;
|
|
53
|
+
truncateContent: boolean;
|
|
54
|
+
minWidth?: undefined;
|
|
33
55
|
})[];
|
|
34
56
|
export declare const columnsV2: ({
|
|
35
57
|
name: string;
|
package/dist/Table/storyUtils.js
CHANGED
|
@@ -142,6 +142,8 @@ export const columns = [
|
|
|
142
142
|
{
|
|
143
143
|
name: 'evolves',
|
|
144
144
|
cell: (row) => (React.createElement(Button, { textBtn: row.evolves }, row.evolves.toString())),
|
|
145
|
+
minWidth: '100px',
|
|
146
|
+
maxWidth: '100px',
|
|
145
147
|
},
|
|
146
148
|
{
|
|
147
149
|
name: 'e.g1',
|
|
@@ -160,8 +162,9 @@ export const columns = [
|
|
|
160
162
|
},
|
|
161
163
|
{
|
|
162
164
|
name: 'e.g4',
|
|
163
|
-
cell: () => '
|
|
164
|
-
|
|
165
|
+
cell: () => 'really super long text that should be cut off',
|
|
166
|
+
maxWidth: '200px',
|
|
167
|
+
truncateContent: true,
|
|
165
168
|
},
|
|
166
169
|
{
|
|
167
170
|
name: 'e.g5',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storyUtils.js","sourceRoot":"","sources":["../../src/Table/storyUtils.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"storyUtils.js","sourceRoot":"","sources":["../../src/Table/storyUtils.tsx"],"names":[],"mappings":"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"}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -1,33 +1,50 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { ButtonProps } from '../Button/Button';
|
|
3
3
|
import { IconStrictProps } from '../IconStrict';
|
|
4
4
|
import { Color } from '../theme';
|
|
5
5
|
export type TableStylesProps = {
|
|
6
6
|
fixedHeader?: boolean;
|
|
7
|
+
headerHeight?: string;
|
|
7
8
|
stripedColor?: Color;
|
|
8
9
|
stickyCell?: boolean;
|
|
9
10
|
headerColor?: Color;
|
|
10
11
|
rowColor?: Color;
|
|
11
12
|
rowBorderColor?: Color;
|
|
13
|
+
rowActionsBgColor?: Color;
|
|
12
14
|
minWidth?: string;
|
|
15
|
+
maxWidth?: string;
|
|
16
|
+
noWrapContent?: boolean;
|
|
17
|
+
truncateContent?: boolean;
|
|
13
18
|
rowPadding?: string;
|
|
19
|
+
columnPadding?: string;
|
|
20
|
+
hideOverflow?: boolean;
|
|
14
21
|
};
|
|
15
22
|
export type Primitive = string | number | boolean | bigint;
|
|
16
23
|
export type RowAction<T> = {
|
|
17
|
-
|
|
24
|
+
element?: ReactElement;
|
|
18
25
|
onClick: (rowData: T) => void;
|
|
19
26
|
iconButton?: Pick<IconStrictProps, 'size' | 'render' | 'iconColor' | 'backgroundColor'>;
|
|
20
27
|
genericButton?: Pick<ButtonProps, 'children' | 'loading' | 'disabled' | 'primary' | 'secondary' | 'fallbackStyle' | 'textBtn' | 'smallButton'>;
|
|
21
28
|
showCondition?: (rowData: T) => boolean;
|
|
22
29
|
};
|
|
30
|
+
export type RowActions<T> = {
|
|
31
|
+
actions: RowAction<T>[];
|
|
32
|
+
minWidth?: string;
|
|
33
|
+
bgColor?: Color;
|
|
34
|
+
};
|
|
23
35
|
type RowCellRenderer<T> = (row: T, rowIndex: number, column: TableColumn<T>, id: string | number) => React.ReactNode;
|
|
24
36
|
export interface TableColumn<T> {
|
|
25
37
|
name?: string | number | React.ReactNode;
|
|
26
38
|
minWidth?: string;
|
|
39
|
+
maxWidth?: string;
|
|
40
|
+
noWrapContent?: boolean;
|
|
41
|
+
truncateContent?: boolean;
|
|
42
|
+
hideOverflow?: boolean;
|
|
27
43
|
cell?: RowCellRenderer<T>;
|
|
28
44
|
}
|
|
29
45
|
interface CommonTableProps<T> {
|
|
30
46
|
columns: TableColumn<T>[];
|
|
47
|
+
headerHeight?: string;
|
|
31
48
|
fixedHeader?: boolean;
|
|
32
49
|
stripedColor?: Color;
|
|
33
50
|
expandable?: (rowData: T) => boolean;
|
|
@@ -42,12 +59,13 @@ interface CommonTableProps<T> {
|
|
|
42
59
|
rows: (rowData: T) => ReactElement | ReactElement[];
|
|
43
60
|
showOnExpand?: (rowData: T) => boolean;
|
|
44
61
|
};
|
|
45
|
-
rowActions?:
|
|
46
|
-
rowActionsMinWidth?: string;
|
|
62
|
+
rowActions?: RowActions<T>;
|
|
47
63
|
rowPadding?: string;
|
|
64
|
+
columnPadding?: string;
|
|
48
65
|
}
|
|
49
66
|
export interface TableProps<T> extends CommonTableProps<T> {
|
|
50
67
|
data: T[];
|
|
68
|
+
noDataContent?: ReactNode;
|
|
51
69
|
}
|
|
52
70
|
export interface TableRowProps<T> extends CommonTableProps<T> {
|
|
53
71
|
rowData: T;
|