en-US

This example shows how to implement select rows.

zh-CN

该示例展示了如何实现选择行。

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

const list = Array.from({ length: 3 }).map((_, i) => ({
  name: `Name ${i + 1}`,
  age: `2${i}`,
  address: `Room 100${i}, Building 2, Fandou Garden, Fandou Street`,
}));
export default function Demo() {
  const [selected, setSelected] = useImmer(new Set(['Name 1']));

  const state = selected.size === 0 ? false : selected.size === list.length ? true : 'mixed';

  return (
    <DTable>
      <table>
        <thead>
          <tr>
            <DTable.Th dWidth={60} dAlign="center">
              <DCheckbox
                dModel={state !== 'mixed' ? state : undefined}
                dIndeterminate={state === 'mixed'}
                onModelChange={(checked) => {
                  setSelected(new Set(checked ? list.map((data) => data.name) : []));
                }}
              ></DCheckbox>
            </DTable.Th>
            <DTable.Th>Name</DTable.Th>
            <DTable.Th>Age</DTable.Th>
            <DTable.Th>Address</DTable.Th>
            <DTable.Th>Action</DTable.Th>
          </tr>
        </thead>
        <tbody>
          {list.map((data) => (
            <tr key={data.name}>
              <DTable.Td dWidth={60} dAlign="center">
                <DCheckbox
                  dModel={selected.has(data.name)}
                  onModelChange={(checked) => {
                    setSelected((draft) => {
                      if (checked) {
                        draft.add(data.name);
                      } else {
                        draft.delete(data.name);
                      }
                    });
                  }}
                ></DCheckbox>
              </DTable.Td>
              <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>
    </DTable>
  );
}