import * as React from 'react'; import { useGrid } from '@crafts/smart-grid'; import users from './users'; import './basic.css'; const generateData = (offset = 0) => users.slice(offset, offset + 100); const api = (offset: number) => new Promise>((res) => { setTimeout(() => { res(generateData(offset)); }, 1200); }); interface IProps { rowHeight?: number; buffer?: number; limit?: number; virtualized?: boolean; } const Table = ({ rowHeight, buffer, limit, virtualized = true }: IProps) => { const [state, setState] = React.useState({ data: generateData(), loading: false, }); const offset = React.useRef(0); const getData = React.useCallback(() => { if (state.loading || offset.current >= 1000) { return; } setState((s) => ({ ...s, loading: true })); offset.current += 100; api(offset.current).then((newD) => { // setData((d) => [...d, ...newD]); setState((s) => ({ data: [...s.data, ...newD], loading: false })); }); }, [state.loading]); const { onScroll, rowRenderer } = useGrid({ data: state.loading ? state.data.concat([null, null]) : state.data, rowHeight: rowHeight || 39, buffer, limit, loadMore: getData, virtualized, }); return (

{rowRenderer((row, style, index, ref) => row ? ( ) : ( ) )}

	Car
First Name	Last Name	Age	Email	Make	Model	Year
{row.firstName}	{row.lastName}	{row.age}	{row.email}	{row.carMake}	{row.carModel}	{row.carYear}
Loading

); }; export default Table;

smart-grid-examples