react material ui table表头在左侧

如果你想要在 React Material UI 中将表头放在左侧，可以使用 `Table` 和 `TableBody` 组件来自定义表格元素的渲染方式。具体步骤如下：

1. 设置表格数据源和表头数据源

const data = [
  {
    name: "John",
    age: 30,
    gender: "Male",
    city: "New York"
  },
  {
    name: "Sarah",
    age: 25,
    gender: "Female",
    city: "San Francisco"
  },
  {
    name: "Tom",
    age: 40,
    gender: "Male",
    city: "Los Angeles"
  }
];

const columns = [
  {
    Header: "Name",
    accessor: "name"
  },
  {
    Header: "Age",
    accessor: "age"
  },
  {
    Header: "Gender",
    accessor: "gender"
  },
  {
    Header: "City",
    accessor: "city"
  }
];

2. 自定义表格元素的渲染方式

<Table>
  <TableBody>
    {columns.map((column) => (
      <TableRow key={column.accessor}>
        <TableCell style={{ fontWeight: "bold", textAlign: "left" }}>
          {column.Header}
        </TableCell>
        {data.map((row) => (
          <TableCell key={row.name + column.accessor}>{row[column.accessor]}</TableCell>
        ))}
      </TableRow>
    ))}
  </TableBody>
</Table>

通过使用 `Table` 和 `TableBody` 组件，可以自定义表格元素的渲染方式。在上面的例子中，首先使用 `map` 方法遍历表头数据源，并通过 `TableRow` 和 `TableCell` 组件渲染出表头元素。通过设置 `textAlign: "left"` 属性将表头靠左对齐。然后，再使用 `map` 方法遍历表格数据源，并通过 `TableCell` 组件渲染出表格元素。

这样，就可以在 React Material UI 中将表头放在左侧了。