en-US

The simplest usage.

zh-CN

最简单的用法。

import { useState } from 'react';

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

const list = Array.from({ length: 100 }).map((_, i) => ({
  name: `Name ${i + 1}`,
  age: `${i}`,
  address: `Room 100${i}, Building 2, Fandou Garden, Fandou Street`,
}));
export default function Demo() {
  const [border, setBorder] = useState(false);
  const [page, setPage] = useState(1);

  return (
    <>
      <DSwitch dModel={border} onModelChange={setBorder}>
        Border
      </DSwitch>
      <br />
      <DTable dBorder={border}>
        <table>
          <caption>Basic Table</caption>
          <thead>
            <tr>
              <DTable.Th>Name</DTable.Th>
              <DTable.Th>Age</DTable.Th>
              <DTable.Th>Address</DTable.Th>
              <DTable.Th>Action</DTable.Th>
            </tr>
          </thead>
          <tbody>
            {list.slice((page - 1) * 10, page * 10).map((data) => (
              <tr key={data.name}>
                <DTable.Td>{data.name}</DTable.Td>
                <DTable.Td>{data.age}</DTable.Td>
                <DTable.Td>{data.address}</DTable.Td>
                <DTable.Td dNowrap>
                  <DButton dType="link">Edit</DButton>
                  <DSeparator dVertical></DSeparator>
                  <DButton dType="link">Delete</DButton>
                </DTable.Td>
              </tr>
            ))}
          </tbody>
        </table>
        <DPagination
          dActive={page}
          dTotal={list.length}
          onPaginationChange={(page, pageSize) => {
            setPage(page);
          }}
        ></DPagination>
      </DTable>
    </>
  );
}