javascript - 将列内容与单元格右侧对齐 React MUIDataTable

Question

我是 MUI 新手，我想将列的内容向右对齐。我的代码如下所示:

<MUIDataTable
  title={""}
  data={data || []}
  columns={realColumns ? realColumns(data, modeMO) : columns(data, modeMO)}
  options={{
    filterType: "textField",
    responsive: "simple",
    selectableRows: selectable, // set checkbox for each row
    search: false, // set search option
    filter: false, // set data filter option
    download: false, // set download option
    print: false, // set print option
    pagination: true, //set pagination option
    viewColumns: false, // set column option
    elevation: 0,
    rowsPerPageOptions: [10, 20, 40, 80, 100],
    //setCellProps: () => ({ align: 'right' }) ,
    onRowSelectionChange: (
      currentRowsSelected,
      allRowsSelected,
      rowsSelected
    ) => {
      setSelectedRows(
        allRowsSelected.map((el) => {
          return data[el.dataIndex];
        })
      );
    },
    selectToolbarPlacement: "none"
  }}
/>;

显示的内容如下: table Picture

所以我想将“Montant à régler”列中的所有数字向右对齐。有人可以帮忙吗？

Answer 1

免责声明:这完全未经测试，只是“列”的一小部分。

为您的列提供自定义渲染并设置单元格属性，例如:

export const columns = [
    {
        name: "category",
        label: "Fun Guy Category",
        options: {
            setCellProps: () => ({ style: { minWidth: "100px", maxWidth: "800px", justifyContent: 'end'  }}),
            customBodyRender: (data, type, row) => {return <pre>{data}</pre>}
      },
    },