en-US

Automatically omitted by the dEllipsis setting, supports global configuration.

zh-CN

通过 dEllipsis 设置自动省略，支持全局配置。

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({});

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

  return (
    <DTable dEllipsis>
      <table>
        <thead>
          <tr>
            <DTable.Th
              title="Long Long Long Long Long Long Name"
              dWidth={120}
              dSort={{
                options: ['descend', null],
                active: sort.name ?? null,
                onSort: (order) => setSort({ name: order }),
              }}
            >
              Long Long Long Long Long Long Name
            </DTable.Th>
            <DTable.Th>Age</DTable.Th>
            <DTable.Th dWidth={200}>Address</DTable.Th>
            <DTable.Th>Action</DTable.Th>
          </tr>
        </thead>
        <tbody>
          {list.map((data) => (
            <tr key={data.name}>
              <DTable.Td dWidth={120}>{data.name}</DTable.Td>
              <DTable.Td>{data.age}</DTable.Td>
              <DTable.Td title={data.address} dWidth={200}>
                {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>
  );
}