= ({
50 | editing,
51 | dataIndex,
52 | title,
53 | inputType,
54 | record,
55 | index,
56 | children,
57 | ...restProps
58 | }) => {
59 | const inputNode = inputType === 'number' ? : ;
60 |
61 | return (
62 | |
63 | {editing ? (
64 |
74 | {inputNode}
75 |
76 | ) : (
77 | children
78 | )}
79 | |
80 | );
81 | };
82 |
83 | const EditableTable = () => {
84 | const [form] = Form.useForm();
85 | const [data, setData] = useState(originData);
86 | const [editingKey, setEditingKey] = useState('');
87 |
88 | const isEditing = (record: Item) => record.key === editingKey;
89 |
90 | const edit = (record: Item) => {
91 | form.setFieldsValue({ name: '', age: '', address: '', ...record });
92 | setEditingKey(record.key);
93 | };
94 |
95 | const cancel = () => {
96 | setEditingKey('');
97 | };
98 |
99 | const save = async (key: React.Key) => {
100 | try {
101 | const row = (await form.validateFields()) as Item;
102 |
103 | const newData = [...data];
104 | const index = newData.findIndex(item => key === item.key);
105 | if (index > -1) {
106 | const item = newData[index];
107 | newData.splice(index, 1, {
108 | ...item,
109 | ...row,
110 | });
111 | setData(newData);
112 | setEditingKey('');
113 | } else {
114 | newData.push(row);
115 | setData(newData);
116 | setEditingKey('');
117 | }
118 | } catch (errInfo) {
119 | console.log('Validate Failed:', errInfo);
120 | }
121 | };
122 |
123 | const columns = [
124 | {
125 | title: 'name',
126 | dataIndex: 'name',
127 | width: '25%',
128 | editable: true,
129 | },
130 | {
131 | title: 'age',
132 | dataIndex: 'age',
133 | width: '15%',
134 | editable: true,
135 | },
136 | {
137 | title: 'address',
138 | dataIndex: 'address',
139 | width: '40%',
140 | editable: true,
141 | },
142 | {
143 | title: 'operation',
144 | dataIndex: 'operation',
145 | render: (_: any, record: Item) => {
146 | const editable = isEditing(record);
147 | return editable ? (
148 |
149 | save(record.key)} style={{ marginRight: 8 }}>
150 | Save
151 |
152 |
153 | Cancel
154 |
155 |
156 | ) : (
157 | edit(record)}>
158 | Edit
159 |
160 | );
161 | },
162 | },
163 | ];
164 |
165 | const mergedColumns = columns.map(col => {
166 | if (!col.editable) {
167 | return col;
168 | }
169 | return {
170 | ...col,
171 | onCell: (record: Item) => ({
172 | record,
173 | inputType: col.dataIndex === 'age' ? 'number' : 'text',
174 | dataIndex: col.dataIndex,
175 | title: col.title,
176 | editing: isEditing(record),
177 | }),
178 | };
179 | });
180 |
181 |
182 |
183 |
184 |
185 | /*******************************/
186 | const y = 500;
187 | const [vt, setComponent] = useVT(() => ({ scroll: { y }, debug: true } ));
188 | setComponent({
189 | body: {
190 | cell: EditableCell,
191 | },
192 | });
193 | /*******************************/
194 |
195 |
196 | return (
197 |
215 | );
216 | };
217 |
218 | export default EditableTable;
219 |
--------------------------------------------------------------------------------
/test/expandable.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * copy this file to your working directory.
3 | */
4 | import React, { FC, useState } from 'react';
5 | import { useVT } from 'virtualizedtableforantd4';
6 | import { Table } from 'antd';
7 |
8 |
9 | function rndstr(str: string) {
10 | const n = 0 | (Math.random() * 10) + 1;
11 | let s = '';
12 | for (let i = 0; i < n; ++i) {
13 | s += str;
14 | }
15 | return s;
16 | }
17 |
18 | const _data: any[] = [];
19 |
20 | for (let i = 0; i < 1000; i++) {
21 | _data.push({
22 | index: i,
23 | name: `Edrward ${i}`,
24 | expandable: ((Math.random() * 10) | 0) > 4,
25 | age: 32,
26 | address: rndstr(`London Park no. ${i}`),
27 | });
28 | }
29 |
30 | const TableScrollTo: FC = () => {
31 | const [expandedRowKeys, setExpandedRowKeys] = useState([]);
32 |
33 | const [VT] = useVT(() => {
34 | return {
35 | // ref: ref, // deprecated
36 | initTop: 1000,
37 | debug: true,
38 | scroll: {
39 | y: 600,
40 | }
41 | }
42 | }, []);
43 |
44 |
45 | return (
46 | <>
47 | {
64 | if (expanded) {
65 | setExpandedRowKeys([...expandedRowKeys, record.index]);
66 | } else {
67 | const keys = expandedRowKeys.filter((k) => k !== record.index);
68 | setExpandedRowKeys(keys);
69 | }
70 | },
71 | expandedRowRender: record => my name is {record.name}
,
72 | rowExpandable: record => record.expandable,
73 | }}
74 | />
75 |
76 | )
77 | }
78 |
79 | export default TableScrollTo;
80 |
--------------------------------------------------------------------------------
/test/fetch.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * copy this file to your working directory.
3 | */
4 | import React, { useState, useEffect } from 'react';
5 | import { Table } from 'antd';
6 | import { useVT } from 'virtualizedtableforantd';
7 |
8 | export default function TableFetch() {
9 | const [dataSource, setDataSource] = useState([]);
10 | const y = 500;
11 | const [vt] = useVT(() => {
12 | return {
13 | scroll: { y },
14 | debug: true,
15 | };
16 | });
17 |
18 | let tempDataSource: any[] = [];
19 | for (let i = 0; i < 100; i++) {
20 | tempDataSource.push({
21 | company_name: `aaa${i}`,
22 | key: i,
23 | });
24 | }
25 |
26 | useEffect(() => {
27 | setTimeout(() => {
28 | setDataSource(tempDataSource);
29 | }, 5000);
30 | }, []);
31 |
32 |
33 | const columns = [
34 | {
35 | title: "No.",
36 | key: "id",
37 | render(text: any, record: any, index: any) {
38 | return index + 1;
39 | },
40 | width: 100
41 | },
42 | {
43 | title: "company name",
44 | dataIndex: "company_name",
45 | width: 200
46 | }
47 | ];
48 |
49 | return (
50 |
57 | );
58 | }
--------------------------------------------------------------------------------
/test/indez.jsx:
--------------------------------------------------------------------------------
1 | import { useVT } from '../src/index'
2 |
3 |
4 | const EditableCell = (props) => {
5 |
6 | return |
7 | }
8 |
9 | const App = () => {
10 | const [vt, setVt] = useVT(() => {
11 | return {
12 | scroll: {
13 | y: 500
14 | }
15 | }
16 | }, [])
17 |
18 | const convertedLegacyValues = []
19 |
20 | setVt({
21 | body: {
22 | cell: (props) => (
23 |
27 | ),
28 | row: (...args) => |
,
29 | }
30 | })
31 |
32 |
33 | return (
34 |
35 | )
36 | }
37 |
38 |
39 |
--------------------------------------------------------------------------------
/test/reload.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * copy this file to your working directory.
3 | */
4 | import React, { useState, useMemo, useCallback, useRef, useContext, useEffect, } from 'react';
5 | import { Table, Button } from 'antd';
6 | import { useVT } from 'virtualizedtableforantd';
7 | import { Switch as RouteSwitch, Route, NavLink } from 'react-router-dom';
8 |
9 |
10 |
11 |
12 | function Table1({ ctx }: { ctx: any} ) {
13 |
14 | const _data = useMemo(() => {
15 | const data: any[] = [];
16 | for (let i = 0; i < 1000; i++) {
17 | data.push({
18 | key: i,
19 | name: `Edrward ${i}`,
20 | age: 32,
21 | address: (`London Park no. ${i}`),
22 | });
23 | }
24 | return data;
25 | }, []);
26 |
27 |
28 | const [data, setData] = useState([]);
29 |
30 |
31 | // Column name age 1 2 3 4 5 6 7 8 operation
32 | const _columns: any = useMemo(() => [
33 | {
34 | title: 'Full Name',
35 | width: 150,
36 | dataIndex: 'name',
37 | key: 'name',
38 | render: (text: any) => {
39 | return {text}
40 | },
41 | fixed: 'left',
42 | },
43 | {
44 | title: 'Age',
45 | width: 100,
46 | dataIndex: 'age',
47 | key: 'age',
48 | },
49 | {
50 | title: 'Column 1',
51 | dataIndex: 'address',
52 | key: '1',
53 | width: 150,
54 | },
55 | {
56 | title: 'Column 2',
57 | dataIndex: 'address',
58 | key: '2',
59 | width: 150,
60 | },
61 | {
62 | title: 'Column 3',
63 | dataIndex: 'address',
64 | key: '3',
65 | width: 170,
66 | },
67 | {
68 | title: 'Column 4',
69 | dataIndex: 'address',
70 | key: '4',
71 | width: 180,
72 | },
73 | {
74 | title: 'Column 5',
75 | dataIndex: 'address',
76 | key: '5',
77 | width: 190,
78 | },
79 | {
80 | title: 'Column 6',
81 | dataIndex: 'address',
82 | key: '6',
83 | width: 150,
84 | },
85 | {
86 | title: 'Column 7',
87 | dataIndex: 'address',
88 | key: '7',
89 |
90 | },
91 | { title: 'Column 8', dataIndex: 'address', key: '8' },
92 |
93 | ], []);
94 |
95 |
96 | const [vt] = useVT(() => {
97 | return {
98 | initTop: ctx.top,
99 | onScroll: ({ top }) => ctx.top = top,
100 | scroll: { y: 500 },
101 | debug: true,
102 | }
103 | }, [ctx.top]);
104 |
105 | useEffect(() => {
106 | setTimeout(() => {
107 | window.alert('fetching the data...');
108 | setData(_data);
109 | }, 50);
110 | }, []);
111 |
112 |
113 | return (
114 | <>
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
132 |
133 | );
134 | }
135 |
136 |
137 | export default function Reload() {
138 |
139 | const ctx = useRef({ top: 0 });
140 |
141 | return (
142 |
143 | {
144 | return (
145 | <>
146 | go home
147 | Mr. Huggins
148 |
149 | )
150 | }}>
151 | }>
152 |
153 | )
154 | }
--------------------------------------------------------------------------------
/test/scroll-to.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useState, useRef } from 'react';
2 | import { useVT } from 'virtualizedtableforantd4';
3 | import { Table, Input, Button } from 'antd';
4 |
5 |
6 | function rndstr(str: string) {
7 | const n = 0 | (Math.random() * 10) + 1;
8 | let s = '';
9 | for (let i = 0; i < n; ++i) {
10 | s += str;
11 | }
12 | return s;
13 | }
14 |
15 | const _data: any[] = [];
16 |
17 | for (let i = 0; i < 1000; i++) {
18 | _data.push({
19 | index: i,
20 | name: `Edrward ${i}`,
21 | age: 32,
22 | address: rndstr(`London Park no. ${i}`),
23 | });
24 | }
25 |
26 | const TableScrollTo: FC = () => {
27 | const [top, setTop] = useState(-1);
28 | const [idx, setIdx] = useState(0);
29 | // const ref = useRef();
30 |
31 | const [VT, _, ref/* new */] = useVT(() => {
32 | return {
33 | // ref: ref, // deprecated
34 | initTop: 1000,
35 | debug: true,
36 | scroll: {
37 | y: 600,
38 | }
39 | }
40 | }, []);
41 |
42 |
43 | return (
44 | <>
45 | scrollTo:
46 | {
49 | const top = (+e.target.value);
50 | setTop(Number.isNaN(top) ? 0 : top);
51 | }}
52 | />
53 |
61 |
62 |
63 | scrollToIdx:
64 | {
68 | const idx = (+e.target.value);
69 | setIdx(Number.isNaN(idx) ? 0 : idx);
70 | }}
71 | />
72 |
79 |
80 |
95 |
96 | )
97 | }
98 |
99 | export default TableScrollTo;
100 |
--------------------------------------------------------------------------------
/test/table ajax.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * copy this file to your working directory.
3 | */
4 | import React, { useState, useMemo, useCallback, useRef, useContext, useEffect, } from 'react';
5 | import { Table, Button } from 'antd';
6 | import { useVT } from 'virtualizedtableforantd';
7 |
8 |
9 |
10 |
11 | function rndstr(str: string) {
12 | const n = 0 | (Math.random() * 4) + 1;
13 | let s = '';
14 | for (let i = 0; i < n; ++i) {
15 | s += str;
16 | }
17 | return s;
18 | }
19 |
20 |
21 | export default function Table1() {
22 |
23 |
24 | const [chunkid, setChunkID] = useState(1);
25 | const [data, setData] = useState([]);
26 |
27 | const myajax = useCallback((chunkid: number) => {
28 | const data: any[] = [];
29 | if (chunkid === 1) {
30 | for (let i = 0; i < 1000; i++) {
31 | const n = 0 | Math.random() * 3000 + 1000;
32 | data.push({
33 | key: `${chunkid}-${i}`,
34 | name: `Edrward ${chunkid}-${i}`,
35 | age: 0 | Math.random() * 88 + 12,
36 | address: rndstr(`London Park no. ${n}`),
37 | });
38 | }
39 | } else {
40 | /** chunk */
41 | for (let i = 0; i < 200; i++) {
42 | const n = 0 | Math.random() * 3000 + 1000;
43 | data.push({
44 | key: `${chunkid}-${i}`,
45 | name: `Edrward ${chunkid}-${i}`,
46 | age: 0 | Math.random() * 88 + 12,
47 | address: rndstr(`London Park no. ${n}`),
48 | });
49 | }
50 | }
51 |
52 |
53 | return new Promise((resolve, reject) => {
54 | setTimeout(() => {
55 | // returns chunkid from your server.
56 | resolve([chunkid + 1, data]);
57 | }, Math.random() * 200 + 100);
58 | });
59 | }, []);
60 |
61 | // Pagination
62 | const [showPagination, setPagination] = useState(false);
63 |
64 | // Column name age 1 2 3 4 5 6 7 8 operation
65 | const _columns: any = useMemo(() => [
66 | {
67 | title: 'Full Name',
68 | width: 150,
69 | dataIndex: 'name',
70 | key: 'name',
71 |
72 | fixed: 'left',
73 | },
74 | {
75 | title: 'Age',
76 | width: 100,
77 | dataIndex: 'age',
78 | key: 'age',
79 | },
80 | {
81 | title: 'Column 1',
82 | dataIndex: 'address',
83 | key: '1',
84 | width: 150,
85 | },
86 | {
87 | title: 'Column 2',
88 | dataIndex: 'address',
89 | key: '2',
90 | width: 150,
91 | },
92 | {
93 | title: 'Column 3',
94 | dataIndex: 'address',
95 | key: '3',
96 | width: 170,
97 | },
98 | {
99 | title: 'Column 4',
100 | dataIndex: 'address',
101 | key: '4',
102 | width: 180,
103 | },
104 | {
105 | title: 'Column 5',
106 | dataIndex: 'address',
107 | key: '5',
108 | width: 190,
109 | },
110 | {
111 | title: 'Column 6',
112 | dataIndex: 'address',
113 | key: '6',
114 | width: 150,
115 | },
116 | {
117 | title: 'Column 7',
118 | dataIndex: 'address',
119 | key: '7',
120 |
121 | },
122 | { title: 'Column 8', dataIndex: 'address', key: '8' },
123 |
124 | ], []);
125 |
126 |
127 | const loadDataByChunk = useCallback(async (chunkid, data) => {
128 | const [ _newchunkid, _newdata ] = await myajax(chunkid);
129 | setChunkID(_newchunkid);
130 | setData([...data, ..._newdata]);
131 | }, [setData, setChunkID]);
132 |
133 | const y = 500;
134 |
135 | const [vt] = useVT(() => ({
136 | onScroll: ({ isEnd }) => {
137 | if (isEnd) {
138 | console.log("loadDataByChunk");
139 | loadDataByChunk(chunkid, data);
140 | }
141 | },
142 | scroll: { y },
143 | debug: true,
144 | }), [chunkid, data]);
145 |
146 | return (
147 | <>
148 |
151 |
152 |
153 |
154 | ---- pagination ----
155 |
156 |
163 |
164 |
175 |
176 | );
177 | }
178 |
179 |
--------------------------------------------------------------------------------
/test/table#100.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * copy this file to your working directory.
3 | */
4 | import React, { useState} from 'react';
5 | import { Table } from 'antd';
6 | import { useVT } from 'virtualizedtableforantd4';
7 |
8 |
9 |
10 |
11 | export default function Table1() {
12 | const initialItems = [
13 | { name: "Item1", description: "Description1", key: 1 },
14 | { name: "Item2", description: "Description2", key: 2 },
15 | { name: "Item3", description: "Description3", key: 3 },
16 | { name: "Item4", description: "Description4", key: 4 }
17 | ];
18 | const columns = [
19 | { title: "Name", dataIndex: "name" },
20 | { title: "Description", dataIndex: "description" }
21 | ];
22 |
23 | const [items, setItems] = useState([]);
24 |
25 | const [vt] = useVT(() => ({ debug:true, scroll: { y: 500 } }), []);
26 |
27 | const addFirstTwo = () => {
28 | const firstTwo = [initialItems[0], initialItems[1]];
29 | setItems(firstTwo);
30 | };
31 |
32 | const removeAll = () => {
33 | setItems([]);
34 | };
35 |
36 | const addFirstFour = () => {
37 | const firstFour = [
38 | initialItems[0],
39 | initialItems[1],
40 | initialItems[2],
41 | initialItems[3]
42 | ];
43 |
44 | setItems(firstFour);
45 | };
46 |
47 | return (
48 |
49 |
50 |
51 |
52 |
53 |
61 |
203 |
204 | ---- pagination ----
205 |
206 |
213 |
214 |
215 |
216 |
217 | ---- add record ----
218 |
219 | key: {
220 | setKey(ev.target.value);
221 | }}>
222 | Full Name: {
223 | setFullname(ev.target.value);
224 | }}>
225 | Age: {
226 | setAge(isNaN(+ev.target.value) ? 0 : +ev.target.value);
227 | }}>
228 |
242 |
256 |
257 |
258 |
259 |
260 |
261 | ----rowSelection----
262 |
263 | setSelection(checked)} />
264 |
265 |
266 |
276 |
277 |
278 |
279 |
280 |
281 | ----Columns----
282 |
283 |
284 | {
321 | setCheckedColumnsFixed(checkedValue as any);
322 | const fixed: any = {
323 | "name": "left",
324 | "age": "left",
325 | "1": "left",
326 | "2": "left",
327 | "3": "left",
328 |
329 | "6": "right",
330 | "7": "right",
331 | "8": "right",
332 | "operation": "right",
333 | };
334 | columns.forEach((column) => {
335 | const c = checkedValue.find(v => v === column.key);
336 | if (c) {
337 | (column as any).fixed = fixed[c];
338 | } else {
339 | try {
340 | delete (column as any).fixed;
341 | } catch {}
342 | }
343 | });
344 | }}
345 | />
346 |
347 | {
384 | setCheckedColumns(checkedValue);
385 | setColumns(checkedValue.map(v => _columns.find(column => column.key === v)));
386 | }}
387 | />
388 |
389 |
390 |
391 |
392 |
393 |
394 | ----VTComponents----
395 |
396 | height:
397 | {
398 | setHeight(Number.isNaN(+e.target.value) ? e.target.value : +e.target.value);
399 | }}>
400 | overscanRowCount:
401 | {
403 | isNumber(+e.target.value) ?
404 | setOverscanRowCount(+e.target.value) : setOverscanRowCount(5);
405 | }}>
406 | destroy: setDestroy(e.target.checked)}>
407 |
408 |
409 |
410 |
411 |
412 | {
427 | setPageSize(pageSize);
428 |
429 | // if (_page !== page) {
430 | // setPage(_page);
431 | // VTScroll(1, { top: 0, left: 0 });
432 | // }
433 | },
434 | onShowSizeChange(current, size) {
435 | setPageSize(size);
436 |
437 | }
438 | } : false
439 | }
440 | rowSelection={
441 | showSelection ?
442 | {
443 | selectedRowKeys: rowKeys,
444 | onChange: (selectedRowKeys, selectedRows) => {
445 | setSelectedRowKeys(selectedRowKeys);
446 | }
447 | } : null
448 | }
449 | >
450 |
451 |
452 | {
456 | const k = record.current.key;
457 | data.find((v) => v.key === k).address = text;
458 | setData([...data]);
459 | setVisibleOfUpdateModal(false);
460 | }}
461 | onCancel={() => {
462 | setVisibleOfUpdateModal(false);
463 | }}
464 | >
465 | Column 1:
466 | {
467 | setText(ev.target.value);
468 | }}>
469 |
470 |
471 | );
472 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "strict": false,
5 | "declaration": true,
6 | "skipLibCheck": true,
7 | "baseUrl": "./",
8 | "esModuleInterop": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------