I'm new to MUI and i want to align the content of a column to the right.my code looks like this:
<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"
}}
/>;
and this is what's displayed: table Picture
so i would like to align all the numbers in "Montant à régler" column to the right. can somebody help please.
If you are using basic tables of Material UI then you can align it through passing align prop to the TableCells to align content in each row and column. You can set align equals to right, left, etc.
If you are using DataGrid or data tables of Material UI (Which I think you are) then you can pass align prop to each column. See the edited example code below from Material 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>
);
}
You can learn many more about Material UI Tables here: Material UI Tables
Hope this helps.
Disclaimer: This is totally un-tested and only a snip of "columns".
Give your columns a custom render and set the cell properties i.e. something like:
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>}
},
},