react-science 12.0.0 → 12.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.
|
@@ -37,7 +37,16 @@ interface TableBaseProps<TData extends RowData> {
|
|
|
37
37
|
*/
|
|
38
38
|
virtualizeRows?: boolean;
|
|
39
39
|
reactTable?: Omit<TableOptions<TData>, 'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'>;
|
|
40
|
+
/**
|
|
41
|
+
* Props which are forwarded to the underlying HTML table element.
|
|
42
|
+
*/
|
|
40
43
|
tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
|
|
44
|
+
/**
|
|
45
|
+
* An alias for `tableProps.className`. Exists to ensure the Table component
|
|
46
|
+
* can be styled with styled components library (e.g. emotion).
|
|
47
|
+
* If you use both the alias and `tableProps.className`, they will be merged together.
|
|
48
|
+
*/
|
|
49
|
+
className?: string;
|
|
41
50
|
/**
|
|
42
51
|
* Override the default row rendering.
|
|
43
52
|
* Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,KAAK,EAAwB,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,KAAK,EAAwB,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAqC3E,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,EAAE,CAAC;IACd;;OAEG;IAEH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,IAAI,CACf,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAC7D,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;IACrE;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAC9C;AAED,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO,CAC/C,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,UAAU,qBAAqB,CAAC,KAAK,SAAS,OAAO,CACnD,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,EAAE,IAAI,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IACxC,iBAAiB,CAAC,KAAK,CAAC,GACxB,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,wBAAgB,KAAK,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,oDA0EpE"}
|
|
@@ -8,17 +8,38 @@ import { useRef } from 'react';
|
|
|
8
8
|
import { TableBody } from './table_body.js';
|
|
9
9
|
import { TableHeader } from './table_header.js';
|
|
10
10
|
import { useTableColumns } from './use_table_columns.js';
|
|
11
|
-
// Blueprint's HTMLTable `striped` prop's implementation is based on nth-child odd / even
|
|
12
|
-
// We cannot use that with virtualization, so we override its implementation here.
|
|
13
11
|
const CustomHTMLTable = styled(HTMLTable, {
|
|
14
|
-
shouldForwardProp: (prop) => prop !== 'striped',
|
|
12
|
+
shouldForwardProp: (prop) => prop !== 'striped' && prop !== 'stickyHeader',
|
|
15
13
|
}) `
|
|
14
|
+
// When using a sticky header, ensure that the borders are located below the last header instead of above the first row.
|
|
15
|
+
${(props) => {
|
|
16
|
+
if (!props.stickyHeader)
|
|
17
|
+
return '';
|
|
18
|
+
return `
|
|
19
|
+
thead tr:last-child {
|
|
20
|
+
box-shadow: inset 0 -1px #11141826;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
tbody tr:first-child td {
|
|
24
|
+
box-shadow: ${props.bordered
|
|
25
|
+
? 'inset 1px 0 0 0 #11141826 !important'
|
|
26
|
+
: 'none !important'};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
tbody tr:first-child td:first-child {
|
|
30
|
+
box-shadow: none !important;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
}}
|
|
34
|
+
|
|
35
|
+
// Blueprint's HTMLTable \`striped\` prop's implementation is based on nth-child odd / even
|
|
36
|
+
// We cannot use that with virtualization, so we override its implementation here.
|
|
16
37
|
tbody tr.odd td {
|
|
17
38
|
background: ${(props) => props.striped ? 'rgba(143, 153, 168, 0.15)' : 'inherit'};
|
|
18
39
|
}
|
|
19
40
|
`;
|
|
20
41
|
export function Table(props) {
|
|
21
|
-
const { data, columns, bordered = false, compact = false, interactive = false, striped = false, stickyHeader = false, reactTable, tableProps, renderRowTr, renderHeaderCell, virtualizeRows, } = props;
|
|
42
|
+
const { data, columns, bordered = false, compact = false, interactive = false, striped = false, stickyHeader = false, reactTable, tableProps, className, renderRowTr, renderHeaderCell, virtualizeRows, } = props;
|
|
22
43
|
const scrollElementRef = useRef(null);
|
|
23
44
|
const columnDefs = useTableColumns(columns);
|
|
24
45
|
const table = useReactTable({
|
|
@@ -35,7 +56,18 @@ export function Table(props) {
|
|
|
35
56
|
estimateSize: (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
|
|
36
57
|
overscan: 5,
|
|
37
58
|
});
|
|
38
|
-
|
|
59
|
+
// Make the table component compatible with styled components libraries.
|
|
60
|
+
let finalClassName;
|
|
61
|
+
if (tableProps?.className && className) {
|
|
62
|
+
finalClassName = `${tableProps.className} ${className}`;
|
|
63
|
+
}
|
|
64
|
+
else if (className) {
|
|
65
|
+
finalClassName = className;
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
finalClassName = tableProps?.className;
|
|
69
|
+
}
|
|
70
|
+
return (_jsx(Container, { virtualizeRows: virtualizeRows, scrollRef: scrollElementRef, children: _jsxs(CustomHTMLTable, { bordered: bordered, compact: compact, interactive: interactive, striped: striped, stickyHeader: stickyHeader, ...tableProps, className: finalClassName, children: [_jsx(TableHeader, { sticky: stickyHeader, headers: table.getFlatHeaders(), renderHeaderCell: renderHeaderCell }), _jsx(TableBody, { rows: table.getRowModel().rows, renderRowTr: renderRowTr, virtualizer: tanstackVirtualizer, virtualizeRows: virtualizeRows })] }) }));
|
|
39
71
|
}
|
|
40
72
|
const ScrollRefDiv = styled.div `
|
|
41
73
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,
|
|
1
|
+
{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,cAAc;CAC3E,CAAC,CAA2B;;IAEzB,CAAC,KAAK,EAAE,EAAE;IACV,IAAI,CAAC,KAAK,CAAC,YAAY;QAAE,OAAO,EAAE,CAAC;IAEnC,OAAO;;;;;;sBAOD,KAAK,CAAC,QAAQ;QACZ,CAAC,CAAC,sCAAsC;QACxC,CAAC,CAAC,iBACN;;;;;;KAMH,CAAC;AACJ,CAAC;;;;;kBAKe,CAAC,KAAK,EAAE,EAAE,CACtB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS;;CAE5D,CAAC;AAkFF,MAAM,UAAU,KAAK,CAAwB,KAAwB;IACnE,MAAM,EACJ,IAAI,EACJ,OAAO,EAEP,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EAEpB,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,gBAAgB,EAEhB,cAAc,GACf,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,aAAa,CAAQ;QACjC,GAAG,UAAU;QACb,IAAI;QACJ,OAAO,EAAE,UAAU;QACnB,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;KACvC,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,cAAc,CAAC;QACzC,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,IAAI,CAAC,MAAM;QAClB,gBAAgB,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO;QAChD,YAAY,EACV,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QACjE,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;IAEH,wEAAwE;IACxE,IAAI,cAAkC,CAAC;IACvC,IAAI,UAAU,EAAE,SAAS,IAAI,SAAS,EAAE,CAAC;QACvC,cAAc,GAAG,GAAG,UAAU,CAAC,SAAS,IAAI,SAAS,EAAE,CAAC;IAC1D,CAAC;SAAM,IAAI,SAAS,EAAE,CAAC;QACrB,cAAc,GAAG,SAAS,CAAC;IAC7B,CAAC;SAAM,CAAC;QACN,cAAc,GAAG,UAAU,EAAE,SAAS,CAAC;IACzC,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,YACpE,MAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,KACtB,UAAU,EACd,SAAS,EAAE,cAAc,aAEzB,KAAC,WAAW,IACV,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,KAAK,CAAC,cAAc,EAAE,EAC/B,gBAAgB,EAAE,gBAAgB,GAClC,EACF,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,mBAAmB,EAChC,cAAc,EAAE,cAAc,GAC9B,IACc,GACR,CACb,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG9B,CAAC;AAEF,SAAS,SAAS,CAAC,EACjB,cAAc,EACd,SAAS,EACT,QAAQ,GAKT;IACC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,KAAC,YAAY,IAAC,GAAG,EAAE,SAAS,YAAG,QAAQ,GAAgB,CAAC;IACjE,CAAC;IACD,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}
|
package/package.json
CHANGED
|
@@ -18,11 +18,34 @@ import type { HeaderCellRenderer } from './table_header_cell.js';
|
|
|
18
18
|
import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
|
|
19
19
|
import { useTableColumns } from './use_table_columns.js';
|
|
20
20
|
|
|
21
|
-
// Blueprint's HTMLTable `striped` prop's implementation is based on nth-child odd / even
|
|
22
|
-
// We cannot use that with virtualization, so we override its implementation here.
|
|
23
21
|
const CustomHTMLTable = styled(HTMLTable, {
|
|
24
|
-
shouldForwardProp: (prop) => prop !== 'striped',
|
|
25
|
-
})
|
|
22
|
+
shouldForwardProp: (prop) => prop !== 'striped' && prop !== 'stickyHeader',
|
|
23
|
+
})<{ stickyHeader: boolean }>`
|
|
24
|
+
// When using a sticky header, ensure that the borders are located below the last header instead of above the first row.
|
|
25
|
+
${(props) => {
|
|
26
|
+
if (!props.stickyHeader) return '';
|
|
27
|
+
|
|
28
|
+
return `
|
|
29
|
+
thead tr:last-child {
|
|
30
|
+
box-shadow: inset 0 -1px #11141826;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
tbody tr:first-child td {
|
|
34
|
+
box-shadow: ${
|
|
35
|
+
props.bordered
|
|
36
|
+
? 'inset 1px 0 0 0 #11141826 !important'
|
|
37
|
+
: 'none !important'
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
tbody tr:first-child td:first-child {
|
|
42
|
+
box-shadow: none !important;
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
45
|
+
}}
|
|
46
|
+
|
|
47
|
+
// Blueprint's HTMLTable \`striped\` prop's implementation is based on nth-child odd / even
|
|
48
|
+
// We cannot use that with virtualization, so we override its implementation here.
|
|
26
49
|
tbody tr.odd td {
|
|
27
50
|
background: ${(props) =>
|
|
28
51
|
props.striped ? 'rgba(143, 153, 168, 0.15)' : 'inherit'};
|
|
@@ -68,7 +91,16 @@ interface TableBaseProps<TData extends RowData> {
|
|
|
68
91
|
TableOptions<TData>,
|
|
69
92
|
'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'
|
|
70
93
|
>;
|
|
94
|
+
/**
|
|
95
|
+
* Props which are forwarded to the underlying HTML table element.
|
|
96
|
+
*/
|
|
71
97
|
tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
|
|
98
|
+
/**
|
|
99
|
+
* An alias for `tableProps.className`. Exists to ensure the Table component
|
|
100
|
+
* can be styled with styled components library (e.g. emotion).
|
|
101
|
+
* If you use both the alias and `tableProps.className`, they will be merged together.
|
|
102
|
+
*/
|
|
103
|
+
className?: string;
|
|
72
104
|
/**
|
|
73
105
|
* Override the default row rendering.
|
|
74
106
|
* Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
|
|
@@ -113,6 +145,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
113
145
|
|
|
114
146
|
reactTable,
|
|
115
147
|
tableProps,
|
|
148
|
+
className,
|
|
116
149
|
renderRowTr,
|
|
117
150
|
renderHeaderCell,
|
|
118
151
|
|
|
@@ -138,6 +171,16 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
138
171
|
overscan: 5,
|
|
139
172
|
});
|
|
140
173
|
|
|
174
|
+
// Make the table component compatible with styled components libraries.
|
|
175
|
+
let finalClassName: string | undefined;
|
|
176
|
+
if (tableProps?.className && className) {
|
|
177
|
+
finalClassName = `${tableProps.className} ${className}`;
|
|
178
|
+
} else if (className) {
|
|
179
|
+
finalClassName = className;
|
|
180
|
+
} else {
|
|
181
|
+
finalClassName = tableProps?.className;
|
|
182
|
+
}
|
|
183
|
+
|
|
141
184
|
return (
|
|
142
185
|
<Container virtualizeRows={virtualizeRows} scrollRef={scrollElementRef}>
|
|
143
186
|
<CustomHTMLTable
|
|
@@ -145,7 +188,9 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
145
188
|
compact={compact}
|
|
146
189
|
interactive={interactive}
|
|
147
190
|
striped={striped}
|
|
191
|
+
stickyHeader={stickyHeader}
|
|
148
192
|
{...tableProps}
|
|
193
|
+
className={finalClassName}
|
|
149
194
|
>
|
|
150
195
|
<TableHeader
|
|
151
196
|
sticky={stickyHeader}
|