en-US

This example shows fixed rows/columns.

zh-CN

该示例展示了固定行/列。

import { useState } from 'react';

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

export default function Demo() {
  return (
    <DTable style={{ maxHeight: 280, overflow: 'auto' }}>
      <table style={{ minWidth: 2000 }}>
        <thead>
          <tr>
            <DTable.Th dWidth={120} dFixed={{ top: 0, left: 0 }}>
              Name
            </DTable.Th>
            <DTable.Th dFixed={{ top: 0, left: 120 }}>Age</DTable.Th>
            {Array.from({ length: 8 }).map((_, i) => (
              <DTable.Th key={i} dFixed={{ top: 0 }}>
                Data {i}
              </DTable.Th>
            ))}
            <DTable.Th dFixed={{ top: 0, right: 0 }}>Action</DTable.Th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: 100 }).map((_, i) => (
            <tr key={i}>
              <DTable.Td dWidth={120} dFixed={{ left: 0 }}>{`Name ${i}`}</DTable.Td>
              <DTable.Td dFixed={{ left: 120 }}>{i}</DTable.Td>
              {Array.from({ length: 8 }).map((_, i) => (
                <DTable.Td key={i}>Some content...</DTable.Td>
              ))}
              <DTable.Td dFixed={{ right: 0 }} dNowrap>
                <DButton dType="link">Edit</DButton>
                <DSeparator dVertical></DSeparator>
                <DButton dType="link">Delete</DButton>
              </DTable.Td>
            </tr>
          ))}
        </tbody>
      </table>
    </DTable>
  );
}