Skip to content

Commit 51b7719

Browse files
radubreharradubrehar
committed
add useInfiniteTableApi and useDataSourceApi hooks and release version patch
1 parent f5092db commit 51b7719

13 files changed

Lines changed: 570 additions & 1 deletion

File tree

‎examples/src/pages/tests/table/datasource-api/useDataSourceApi.page.tsx‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
InfiniteTablePropRowStyle,
5+
InfiniteTableRowInfo,
6+
DataSourceApi,
7+
type InfiniteTableColumn,
8+
useDataSourceApi,
9+
} from '@infinite-table/infinite-react';
10+
import React, { useState } from 'react';
11+
12+
export type Employee = {
13+
id: number;
14+
companyName: string;
15+
companySize: string;
16+
firstName: string;
17+
lastName: string;
18+
country: string;
19+
countryCode: string;
20+
city: string;
21+
streetName: string;
22+
streetNo: string;
23+
department: string;
24+
team: string;
25+
salary: number;
26+
age: number;
27+
email: string;
28+
};
29+
30+
const data: Employee[] = [
31+
{
32+
id: 1,
33+
firstName: 'John',
34+
lastName: 'Doe',
35+
country: 'USA',
36+
city: 'New York',
37+
salary: 100000,
38+
department: 'Engineering',
39+
team: 'Team A',
40+
companyName: 'Company A',
41+
companySize: 'Large',
42+
countryCode: 'US',
43+
streetName: 'Main St',
44+
streetNo: '123',
45+
age: 30,
46+
email: 'john.doe@example.com',
47+
},
48+
{
49+
id: 2,
50+
firstName: 'Jane',
51+
lastName: 'Smith',
52+
country: 'Canada',
53+
city: 'Toronto',
54+
salary: 90000,
55+
department: 'Marketing',
56+
team: 'Team B',
57+
companyName: 'Company B',
58+
companySize: 'Medium',
59+
countryCode: 'CA',
60+
streetName: 'Maple Ave',
61+
streetNo: '456',
62+
age: 28,
63+
email: 'jane.smith@example.com',
64+
},
65+
{
66+
id: 3,
67+
firstName: 'Alice',
68+
lastName: 'Johnson',
69+
country: 'UK',
70+
city: 'London',
71+
salary: 120000,
72+
department: 'Finance',
73+
team: 'Team C',
74+
companyName: 'Company C',
75+
companySize: 'Small',
76+
countryCode: 'UK',
77+
streetName: 'Baker St',
78+
streetNo: '789',
79+
age: 35,
80+
email: 'alice.johnson@example.com',
81+
},
82+
{
83+
id: 4,
84+
firstName: 'Bob',
85+
lastName: 'Brown',
86+
country: 'Australia',
87+
city: 'Sydney',
88+
salary: 110000,
89+
department: 'Human Resources',
90+
team: 'Team D',
91+
companyName: 'Company D',
92+
companySize: 'Medium',
93+
countryCode: 'AU',
94+
streetName: 'Collins St',
95+
streetNo: '101',
96+
age: 40,
97+
email: 'bob.brown@example.com',
98+
},
99+
];
100+
101+
export const columns: Record<string, InfiniteTableColumn<Employee>> = {
102+
firstName: {
103+
field: 'firstName',
104+
header: 'First Name',
105+
},
106+
country: {
107+
field: 'country',
108+
header: 'Country',
109+
columnGroup: 'location',
110+
},
111+
city: {
112+
field: 'city',
113+
header: 'City',
114+
columnGroup: 'address',
115+
},
116+
salary: {
117+
field: 'salary',
118+
type: 'number',
119+
header: 'Salary',
120+
},
121+
department: {
122+
field: 'department',
123+
header: 'Department',
124+
},
125+
team: {
126+
field: 'team',
127+
header: 'Team',
128+
},
129+
company: { field: 'companyName', header: 'Company' },
130+
companySize: { field: 'companySize', header: 'Company Size' },
131+
};
132+
133+
const rowStyle: InfiniteTablePropRowStyle<Employee> = (param: {
134+
rowInfo: InfiniteTableRowInfo<Employee>;
135+
}) => {
136+
const { rowInfo } = param;
137+
if (rowInfo.isGroupRow) {
138+
return;
139+
}
140+
const { data } = rowInfo;
141+
const salary = data ? data.salary : 0;
142+
143+
if (salary > 150_000) {
144+
return { background: 'tomato' };
145+
}
146+
147+
if (rowInfo.indexInAll % 10 === 0) {
148+
return { background: 'lightblue', color: 'black' };
149+
}
150+
return undefined;
151+
};
152+
153+
function ButtonsArea() {
154+
const dataSourceApi = useDataSourceApi<Employee>();
155+
156+
const removeRowsByPrimaryKey = async () => {
157+
if (!dataSourceApi) {
158+
return;
159+
}
160+
const getAllData = dataSourceApi.getRowInfoArray();
161+
console.log('data source before remove', getAllData);
162+
163+
const listOfPrimaryKeys = getAllData.map((row: any) => row.data.id);
164+
console.log('listOfPrimaryKeys', listOfPrimaryKeys);
165+
166+
await dataSourceApi.removeDataArrayByPrimaryKeys(listOfPrimaryKeys);
167+
console.log('data source after remove', dataSourceApi.getRowInfoArray());
168+
};
169+
170+
const removeRowsByDataRow = async () => {
171+
if (!dataSourceApi) {
172+
return;
173+
}
174+
const getAllData = dataSourceApi.getRowInfoArray();
175+
console.log('data source before remove', getAllData);
176+
177+
const listOfRows = getAllData.map((row: any) => row.data);
178+
console.log('listOfRows', listOfRows);
179+
await dataSourceApi.removeDataArray(listOfRows);
180+
console.log('data source after remove', dataSourceApi.getRowInfoArray());
181+
};
182+
183+
return (
184+
<>
185+
<button type="button" onClick={removeRowsByPrimaryKey}>
186+
Click Me to removeRowsByPrimaryKey!
187+
</button>
188+
<button type="button" onClick={removeRowsByDataRow}>
189+
Click Me to removeRowsByDataRow!
190+
</button>
191+
</>
192+
);
193+
}
194+
export default function App() {
195+
return (
196+
<>
197+
<DataSource<Employee> data={data} primaryKey="id">
198+
<ButtonsArea />
199+
<InfiniteTable<Employee>
200+
columns={columns}
201+
rowStyle={rowStyle}
202+
domProps={{
203+
style: { height: '80vh' },
204+
}}
205+
/>
206+
</DataSource>
207+
</>
208+
);
209+
}

‎examples/src/pages/tests/table/datasource-api/useDataSourceApi.spec.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { test, expect } from '@testing';
2+
3+
export default test.describe.parallel('useDataSourceApi', () => {
4+
test('removeDataArrayByPrimaryKeys - works to remove more rows in one go', async ({
5+
page,
6+
rowModel,
7+
}) => {
8+
await page.waitForInfinite();
9+
10+
let rowCount = await rowModel.getRenderedRowCount();
11+
12+
expect(rowCount).toBe(4);
13+
14+
await page.click('button:first-of-type');
15+
16+
await page.evaluate(() => new Promise(requestAnimationFrame));
17+
18+
rowCount = await rowModel.getRenderedRowCount();
19+
20+
expect(rowCount).toBe(0);
21+
});
22+
test('removeDataArray - works to remove more rows in one go', async ({
23+
page,
24+
rowModel,
25+
}) => {
26+
await page.waitForInfinite();
27+
28+
let rowCount = await rowModel.getRenderedRowCount();
29+
30+
expect(rowCount).toBe(4);
31+
32+
await page.click('button:last-of-type');
33+
34+
await page.evaluate(() => new Promise(requestAnimationFrame));
35+
36+
rowCount = await rowModel.getRenderedRowCount();
37+
38+
expect(rowCount).toBe(0);
39+
});
40+
});

0 commit comments

Comments
 (0)