Skip to content

Commit 62ce41d

Browse files
radubreharradubrehar
committed
release version patch
1 parent 34217f8 commit 62ce41d

File tree

15 files changed

+750
-65
lines changed

15 files changed

+750
-65
lines changed

‎examples/src/pages/tests/table/perf/horizontal-layout-bug.page.tsx‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
type InfiniteTablePropColumns,
5+
useInfiniteColumnCell,
6+
} from '@infinite-table/infinite-react';
7+
8+
import * as React from 'react';
9+
import { useState } from 'react';
10+
11+
type Developer = {
12+
id: number;
13+
14+
firstName: string;
15+
lastName: string;
16+
17+
currency: string;
18+
country: string;
19+
preferredLanguage: string;
20+
stack: string;
21+
canDesign: 'yes' | 'no';
22+
23+
age: number;
24+
salary: number;
25+
};
26+
27+
globalThis.React = React;
28+
const columns: InfiniteTablePropColumns<Developer> = {
29+
isFavorite: {
30+
defaultWidth: 21,
31+
header: 'fav',
32+
style: {
33+
backgroundColor: 'rgba(0, 0, 155, 0.4)',
34+
},
35+
},
36+
label: {
37+
header: 'label',
38+
defaultWidth: 150,
39+
// field: 'label',
40+
style: {
41+
backgroundColor: 'rgba(200, 200, 0, 0.4)',
42+
},
43+
},
44+
bidSize: {
45+
header: 'bidSize',
46+
// field: 'bidSize',
47+
defaultWidth: 45,
48+
style: {
49+
backgroundColor: 'rgba(200, 250, 0, 0.4)',
50+
},
51+
},
52+
bidPrice: {
53+
header: 'bidPrice',
54+
type: 'number',
55+
defaultWidth: 65,
56+
// defaultWidth: 80,
57+
style: {
58+
backgroundColor: 'rgba(0, 200, 0, 0.4)',
59+
},
60+
},
61+
offerPrice: {
62+
header: 'offerPrice',
63+
type: 'number',
64+
defaultWidth: 65,
65+
style: {
66+
backgroundColor: 'rgba(255, 0, 0, 0.4)',
67+
},
68+
},
69+
offerSize: {
70+
header: 'offerSize',
71+
// field: 'offerSize',
72+
defaultWidth: 45,
73+
style: {
74+
backgroundColor: 'rgba(0, 255, 0, 0.4)',
75+
},
76+
},
77+
'blotter-bidSize': {
78+
header: 'blotter-bidSize',
79+
field: 'age',
80+
type: 'number',
81+
defaultWidth: 45,
82+
style: {
83+
backgroundColor: 'rgba(0, 200, 255, 0.4)',
84+
},
85+
},
86+
'blotter-bidPrice': {
87+
header: 'blotter-bidPrice',
88+
type: 'number',
89+
defaultWidth: 65,
90+
style: {
91+
backgroundColor: 'rgba(0, 200, 255, 0.4)',
92+
},
93+
},
94+
'blotter-offerPrice': {
95+
header: 'blotter-offerPrice',
96+
type: 'number',
97+
defaultWidth: 65,
98+
style: {
99+
backgroundColor: 'rgba(200, 0, 255, 0.4)',
100+
},
101+
},
102+
'blotter-offerSize': {
103+
header: 'blotter-offerSize',
104+
type: 'number',
105+
defaultWidth: 45,
106+
style: {
107+
backgroundColor: 'rgba(180, 0, 255, 0.4)',
108+
},
109+
},
110+
};
111+
112+
Object.keys(columns).forEach((key) => {
113+
columns[key].render = ({}) => {
114+
return <CustomCmp />;
115+
};
116+
});
117+
118+
function CustomCmp() {
119+
const { rowInfo, column } = useInfiniteColumnCell();
120+
const now = Date.now();
121+
122+
// while (Date.now() - now < 0.001) {
123+
// // do nothing
124+
// }
125+
return (
126+
<div>
127+
{rowInfo.indexInAll}-{column.id}
128+
</div>
129+
);
130+
}
131+
132+
const domProps = {
133+
// style: { height: 420 /*30px header, 420 body*/, width: 230 },
134+
style: { height: '80vh' /*30px header, 420 body*/, width: '100vw' },
135+
};
136+
137+
const data = Array.from({ length: 10000 }, (_, i) => ({
138+
id: i,
139+
preferredLanguage: `Lang ${i}`,
140+
age: i * 10,
141+
salary: i * 1000,
142+
firstName: `John ${i}`,
143+
lastName: `Doe ${i}`,
144+
currency: `USD ${i}`,
145+
country: `USA ${i}`,
146+
canDesign: i % 2 === 0 ? ('yes' as const) : ('no' as const),
147+
stack: i % 2 === 0 ? 'frontend' : 'backend',
148+
}));
149+
150+
(globalThis as any).INFINITE_API = null;
151+
export default function App() {
152+
const [wrapRowsHorizontally, setWrapRowsHorizontally] = useState(true);
153+
154+
return (
155+
<>
156+
<button
157+
onClick={() => {
158+
setWrapRowsHorizontally(!wrapRowsHorizontally);
159+
}}
160+
>
161+
toggle
162+
</button>
163+
<input type="text" defaultValue="" />
164+
<DataSource<Developer>
165+
primaryKey="id"
166+
data={data}
167+
key={`${wrapRowsHorizontally}`}
168+
defaultCellSelection={{
169+
defaultSelection: false,
170+
selectedCells: [],
171+
}}
172+
>
173+
<InfiniteTable<Developer>
174+
onReady={({ api }) => {
175+
(globalThis as any).INFINITE_API = api;
176+
}}
177+
debugId="table"
178+
wrapRowsHorizontally={true}
179+
rowHeight={30}
180+
domProps={domProps}
181+
columnHeaderHeight={30}
182+
columns={columns}
183+
columnMinWidth={100}
184+
keyboardNavigation="cell"
185+
columnDefaultWidth={100}
186+
onCellClick={({ rowIndex, colIndex }) => {
187+
console.log('clicked', rowIndex, colIndex);
188+
}}
189+
/>
190+
</DataSource>
191+
</>
192+
);
193+
}

‎examples/src/pages/tests/table/treegrid/tree-filter-function-with-custom-selection.page.tsx‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import * as React from 'react';
2+
3+
import {
4+
InfiniteTableColumn,
5+
TreeDataSource,
6+
TreeGrid,
7+
TreeSelectionValue,
8+
withSelectedLeafNodesOnly,
9+
} from '@infinite-table/infinite-react';
10+
11+
import { useCallback, useState } from 'react';
12+
13+
export type FileSystemNode = {
14+
name: string;
15+
type: 'file' | 'folder';
16+
children?: FileSystemNode[] | null;
17+
sizeKB?: number;
18+
id: string;
19+
collapsed?: boolean;
20+
};
21+
22+
export const nodes: FileSystemNode[] = [
23+
{
24+
name: 'Documents',
25+
type: 'folder',
26+
id: '1',
27+
children: [
28+
{ name: 'timetable.xls', type: 'file', sizeKB: 10, id: '2' },
29+
{
30+
name: 'resume.ppt',
31+
type: 'file',
32+
sizeKB: 100,
33+
id: '3',
34+
},
35+
{
36+
type: 'folder',
37+
name: 'pictures',
38+
id: '4',
39+
children: [
40+
{
41+
name: 'beach.jpg',
42+
type: 'file',
43+
sizeKB: 2024,
44+
id: '5',
45+
},
46+
{
47+
name: 'mountain.jpg',
48+
type: 'file',
49+
sizeKB: 302,
50+
id: '6',
51+
},
52+
],
53+
},
54+
{
55+
type: 'file',
56+
name: 'last.txt',
57+
id: '7',
58+
},
59+
],
60+
},
61+
{
62+
type: 'folder',
63+
name: 'Downloads',
64+
id: '8',
65+
collapsed: true,
66+
children: [
67+
{
68+
name: 'resume.doc',
69+
type: 'file',
70+
sizeKB: 5034,
71+
id: '9',
72+
},
73+
{
74+
name: 'resume.pdf',
75+
type: 'file',
76+
sizeKB: 1000,
77+
id: '10',
78+
},
79+
],
80+
},
81+
];
82+
83+
const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
84+
name: {
85+
field: 'name',
86+
renderTreeIcon: true,
87+
renderSelectionCheckBox: true,
88+
renderValue: ({ value, data }) => {
89+
return (
90+
<>
91+
{value} - {data!.id}
92+
</>
93+
);
94+
},
95+
},
96+
type: { field: 'type' },
97+
sizeKB: { field: 'sizeKB' },
98+
};
99+
100+
export default function DataTestPage() {
101+
const [filter, setFilter] = useState('');
102+
103+
const [treeSelection, setTreeSelection] = useState<TreeSelectionValue>({
104+
defaultSelection: false,
105+
selectedPaths: [],
106+
});
107+
108+
(globalThis as any).treeSelection = treeSelection;
109+
110+
const nodeMatches = useCallback(
111+
({ data }: { data: FileSystemNode }) => {
112+
return !filter
113+
? data
114+
: data.name.toLowerCase().includes(filter.toLowerCase());
115+
},
116+
[filter],
117+
);
118+
const filterFunction = useCallback(
119+
({
120+
data,
121+
filterTreeNode,
122+
}: {
123+
data: FileSystemNode;
124+
filterTreeNode: (data: FileSystemNode) => FileSystemNode | boolean;
125+
}) => {
126+
if (!Array.isArray(data.children)) {
127+
return nodeMatches({ data });
128+
}
129+
130+
return filterTreeNode(data);
131+
},
132+
[nodeMatches],
133+
);
134+
return (
135+
<React.StrictMode>
136+
<input
137+
type="text"
138+
name="filter"
139+
className="border border-black p-2 m-1"
140+
placeholder="Type to filter"
141+
value={filter}
142+
onChange={(e) => setFilter(e.target.value)}
143+
/>
144+
<TreeDataSource<FileSystemNode>
145+
data={nodes}
146+
primaryKey="id"
147+
selectionMode="multi-row"
148+
treeSelection={treeSelection}
149+
onTreeSelectionChange={withSelectedLeafNodesOnly(setTreeSelection)}
150+
treeFilterFunction={filterFunction}
151+
defaultTreeExpandState={{
152+
defaultExpanded: true,
153+
collapsedPaths: [],
154+
}}
155+
>
156+
<TreeGrid<FileSystemNode>
157+
wrapRowsHorizontally
158+
editable={() => true}
159+
columnDefaultWidth={300}
160+
domProps={{
161+
style: {
162+
margin: '5px',
163+
height: 900,
164+
border: '1px solid gray',
165+
position: 'relative',
166+
},
167+
}}
168+
columns={columns}
169+
/>
170+
</TreeDataSource>
171+
</React.StrictMode>
172+
);
173+
}

0 commit comments

Comments
 (0)