en-US

Sorting is set via dSort.

zh-CN

通过 dSort 设置排序。

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

const origin = [1, 3, 2].map((n) => ({
  name: `Name ${6 - n}`,
  age: `2${n}`,
  address: `Room 100${n}, Building 2, Fandou Garden, Fandou Street`,
}));
export default function Demo() {
  const [sort, setSort] = useImmer({ age: 'descend' });

  const sortFn = (() => {
    if (sort.name) {
      return (a, b) => a.name.localeCompare(b.name) * (sort.name === 'ascend' ? 1 : -1);
    }
    if (sort.age) {
      return (a, b) => a.age.localeCompare(b.age) * (sort.age === 'ascend' ? 1 : -1);
    }
  })();
  const list = sortFn ? [...origin].sort(sortFn) : origin;

  return (
    <DTable>
      <table>
        <thead>
          <tr>
            <DTable.Th
              dSort={{
                options: ['descend', null],
                active: sort.name ?? null,
                onSort: (order) => setSort({ name: order }),
              }}
            >
              Name
            </DTable.Th>
            <DTable.Th
              dSort={{
                active: sort.age ?? null,
                onSort: (order) => setSort({ age: order }),
              }}
            >
              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>{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>
  );
}