en-US

This example shows how to use Virtual Scroll to handle large data.

zh-CN

该示例展示了如何使用虚拟滚动处理大数据。

import { useMemo } from 'react';

import { DTable, DButton, DSeparator, DVirtualScroll } from '@react-devui/ui';

export default function Demo() {
  const vsPerformance = useMemo(
    () => ({
      dList: Array.from({ length: 100000 }).map((_, i) => ({
        name: `Name ${i + 1}`,
        age: `${i}`,
        address: `Room 100${i}, Building 2, Fandou Garden, Fandou Street`,
      })),
      dItemSize: 54,
      dItemKey: (item) => item.name,
    }),
    []
  );

  return (
    <DVirtualScroll
      {...vsPerformance}
      dFillNode={<tr></tr>}
      dItemRender={(item, index) => {
        return (
          <tr key={item.name} style={{ height: 54 }} aria-rowindex={index + 1 + 1}>
            <DTable.Td dWidth={180}>{item.name}</DTable.Td>
            <DTable.Td dWidth={100}>{item.age}</DTable.Td>
            <DTable.Td>{item.address}</DTable.Td>
            <DTable.Td dWidth={200} dNowrap>
              <DButton dType="link">Edit</DButton>
              <DSeparator dVertical></DSeparator>
              <DButton dType="link">Delete</DButton>
            </DTable.Td>
          </tr>
        );
      }}
      dSize={280}
    >
      {({ render, vsList }) =>
        render(
          <DTable style={{ height: 280, overflow: 'auto' }} dEllipsis>
            <table style={{ tableLayout: 'fixed' }} aria-rowcount={vsPerformance.dList.length + 1}>
              <thead>
                <tr style={{ height: 54 }} aria-rowindex="1">
                  <DTable.Th dWidth={180} dFixed={{ top: 0 }}>
                    Name
                  </DTable.Th>
                  <DTable.Th dWidth={100} dFixed={{ top: 0 }}>
                    Age
                  </DTable.Th>
                  <DTable.Th dFixed={{ top: 0 }}>Address</DTable.Th>
                  <DTable.Th dWidth={200} dFixed={{ top: 0 }}>
                    Action
                  </DTable.Th>
                </tr>
              </thead>
              <tbody>{vsList}</tbody>
            </table>
          </DTable>
        )
      }
    </DVirtualScroll>
  );
}