如何实现有固定列的React表（附代码示例）本教程是本系列3篇中的第3篇。第1部分：如何创建一个React表组件第2

本教程是本系列3篇中的第3篇。

第1部分：如何创建一个React表组件
第2部分：如何。带有主题的React表

在本教程中，我想告诉你如何使用带有固定列的React表库。在前面的例子中，你安装了React Table Library来创建一个表组件，并给它一个主题。现在，你将使你的用户能够使一列粘在侧面。

...
import { useTheme } from '@table-library/react-table-library/theme';

const App = () => {
  const data = { nodes: list };

  const theme = useTheme({
    BaseCell: `
      &:nth-of-type(1) {
        left: 0px;

        min-width: 250px;
        width: 250px;
      }

      &:nth-of-type(2) {
        left: 250px;

        min-width: 150px;
        width: 150px;
      }

      &:nth-of-type(3),
      &:nth-of-type(4) {
        min-width: 50%;
        width: 50%;
      }
    `,
  });

  return (...);
};

列是固定在左边的。你也可以用同样的方式将列固定在右边。现在需要的是给单元格组件一个pinLeft （或pinRight ）的道具，以表明它们可以粘在侧面。

const App = () => {
  ...

  return (
    <Table data={data} theme={theme} layout={{ custom: true, horizontalScroll: true }}>
      {(tableList) => (
        <>
          <Header>
            <HeaderRow>
              <HeaderCell pinLeft>Task</HeaderCell>
              <HeaderCell pinLeft>Deadline</HeaderCell>
              <HeaderCell>Type</HeaderCell>
              <HeaderCell>Complete</HeaderCell>
            </HeaderRow>
          </Header>

          <Body>
            {tableList.map((item) => (
              <Row key={item.id} item={item}>
                <Cell pinLeft>{item.name}</Cell>
                <Cell pinLeft>
                  {item.deadline.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                  })}
                </Cell>
                <Cell>{item.type}</Cell>
                <Cell>{item.isComplete.toString()}</Cell>
              </Row>
            ))}
          </Body>
        </>
      )}
    </Table>
  );
};

现在一切就绪，表格的非固定列将垂直滚动，而固定列则保持粘在表格的侧面。