Skip to content

Commit f5d6852

Browse files
radubreharradubrehar
committed
Add colType.className and release version patch
1 parent 9a4bca7 commit f5d6852

39 files changed

Lines changed: 2044 additions & 1003 deletions

‎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: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
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+
const domProps = {
82+
style: {
83+
minHeight: '50vh',
84+
width: '100vw',
85+
// width: 575,
86+
marginTop: 200,
87+
},
88+
};
89+
90+
export default function App() {
91+
const groupBy: DataSourceGroupBy<Developer>[] = React.useMemo(
92+
() => [
93+
{
94+
field: 'country',
95+
},
96+
{ field: 'stack' },
97+
],
98+
[],
99+
);
100+
101+
return (
102+
<DataSource<Developer> data={dataSource} primaryKey="id" groupBy={groupBy}>
103+
<h1>Your DataGrid</h1>
104+
<AppGrid />
105+
</DataSource>
106+
);
107+
}
108+
109+
function AppGrid() {
110+
const { dataArray } = useDataSourceState();
111+
return (
112+
<div
113+
style={{
114+
height: '80vh',
115+
display: 'flex',
116+
flexDirection: 'column',
117+
justifyItems: 'stretch',
118+
gap: 10,
119+
}}
120+
>
121+
{dataArray.length} rows
122+
<InfiniteTable<Developer>
123+
groupRenderStrategy="single-column"
124+
defaultActiveRowIndex={0}
125+
domProps={{
126+
style: {
127+
flex: 1,
128+
},
129+
}}
130+
columns={columns}
131+
columnDefaultWidth={150}
132+
/>
133+
</div>
134+
);
135+
}
136+
137+
const dataSource = () => {
138+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100')
139+
.then((r) => r.json())
140+
.then((data: Developer[]) => data);
141+
};

0 commit comments

Comments
 (0)