将列内容与单元格右侧对齐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",
            }}
        />

这是显示的：桌子图片

因此，我想将“Montantárégler”列中的所有数字向右对齐。有人能帮忙吗。

Answer 1

如果您使用的是材质UI的基本表格，则可以通过将align prop传递到表格单元格来对齐它，以对齐每行和每列中的内容。可以将“对齐”设置为“右”、“左”等。

如果您正在使用DataGrid或材料UI的数据表（我认为您是），那么您可以向每个列传递对齐道具。请参阅下面材质UI中编辑的示例代码：

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";

const columns = [
{ field: "id", align: "rights", headerName: "ID", width: 70 },
{ field: "firstName", align: "center", headerName: "First name", 
width: 130 },
{ field: "lastName", align: "left", headerName: "Last name", 
width: 130 },
{
field: "age",
headerName: "Age",
type: "number",
width: 90
},
{
field: "fullName",
headerName: "Full name",
description: "This column has a value getter and is not 
sortable.",
sortable: false,
width: 160,
valueGetter: (params) =>
  `${params.getValue(params.id, "firstName") || ""} ${
    params.getValue(params.id, "lastName") || ""
  }`
}
];

const rows = [
{ id: 1, align: "right", lastName: "Snow", firstName: "Jon", age: 
35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null 
},
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }
];

export default function DataTable() {
return (
<div style={{ height: 400, width: "100%" }}>
  <DataGrid
    rows={rows}
    columns={columns}
    pageSize={5}
    rowsPerPageOptions={[5]}
    checkboxSelection
  />
</div>
);
}

您可以在这里了解更多关于材料UI表的信息：材料UI表

希望这有帮助。