Skip to content

Commit 4576bc3

Browse files
radubreharradubrehar
authored
Add colType.className and release version patch (#282)
1 parent 9a4bca7 commit 4576bc3

39 files changed

+2035
-1003
lines changed

‎examples/src/pages/_document.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function Document() {
1010
/>
1111
</Head>
1212
<body
13-
className="__next dark infinite-theme-mode--dark"
13+
className="__next infinite-theme-mode--dark"
1414
style={{
1515
//@ts-ignore ignore
1616
'--it-row-height': '3rem',

‎examples/src/pages/tests/table/custom-structure.page.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
InfiniteTableColumn,
5+
DataSourceGroupBy,
6+
components,
7+
useDataSourceState,
8+
} from '@infinite-table/infinite-react';
9+
import * as React from 'react';
10+
11+
const { CheckBox } = components;
12+
13+
type Developer = {
14+
id: number;
15+
firstName: string;
16+
lastName: string;
17+
country: string;
18+
city: string;
19+
currency: string;
20+
preferredLanguage: string;
21+
stack: string;
22+
canDesign: 'yes' | 'no';
23+
hobby: string;
24+
salary: number;
25+
age: number;
26+
};
27+
28+
const columns: Record<string, InfiniteTableColumn<Developer>> = {
29+
age: {
30+
field: 'age',
31+
header: 'Age',
32+
type: 'number',
33+
defaultWidth: 100,
34+
renderValue: ({ value }) => value,
35+
},
36+
salary: {
37+
field: 'salary',
38+
type: 'number',
39+
defaultWidth: 210,
40+
},
41+
currency: { field: 'currency', header: 'Currency', defaultWidth: 100 },
42+
preferredLanguage: {
43+
field: 'preferredLanguage',
44+
header: 'Programming Language',
45+
},
46+
47+
canDesign: {
48+
defaultWidth: 135,
49+
field: 'canDesign',
50+
header: 'Design Skills',
51+
renderValue: ({ value }) => {
52+
return (
53+
<div style={{ display: 'flex', alignItems: 'center' }}>
54+
<CheckBox
55+
defaultChecked={value === null ? null : value === 'yes'}
56+
domProps={{
57+
style: {
58+
marginRight: 10,
59+
},
60+
}}
61+
/>
62+
{value === null ? 'Some' : value === 'yes' ? 'Yes' : 'No'}
63+
</div>
64+
);
65+
},
66+
},
67+
country: {
68+
field: 'country',
69+
header: 'Country',
70+
},
71+
firstName: { field: 'firstName', header: 'First Name' },
72+
stack: { field: 'stack', header: 'Stack' },
73+
74+
city: {
75+
field: 'city',
76+
header: 'City',
77+
renderHeader: ({ column }) => `${column.computedVisibleIndex} City`,
78+
},
79+
};
80+
81+
export default function App() {
82+
const groupBy: DataSourceGroupBy<Developer>[] = React.useMemo(
83+
() => [
84+
{
85+
field: 'country',
86+
},
87+
{ field: 'stack' },
88+
],
89+
[],
90+
);
91+
92+
return (
93+
<DataSource<Developer> data={dataSource} primaryKey="id" groupBy={groupBy}>
94+
<h1>Your DataGrid</h1>
95+
<AppGrid />
96+
</DataSource>
97+
);
98+
}
99+
100+
function AppGrid() {
101+
const { dataArray } = useDataSourceState();
102+
return (
103+
<div
104+
style={{
105+
height: '80vh',
106+
display: 'flex',
107+
flexDirection: 'column',
108+
justifyItems: 'stretch',
109+
gap: 10,
110+
}}
111+
>
112+
{dataArray.length} rows
113+
<InfiniteTable<Developer>
114+
groupRenderStrategy="single-column"
115+
defaultActiveRowIndex={0}
116+
domProps={{
117+
style: {
118+
flex: 1,
119+
},
120+
}}
121+
columns={columns}
122+
columnDefaultWidth={150}
123+
/>
124+
</div>
125+
);
126+
}
127+
128+
const dataSource = () => {
129+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100')
130+
.then((r) => r.json())
131+
.then((data: Developer[]) => data);
132+
};

0 commit comments

Comments
 (0)