Align column content to the right of cell React MUIDataTable

user_16843995 0
Viewed 1271

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.

material-ui reactjs javascript
2 Answers

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.

user_129813530

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>}
      },
    },

user_1259810
Related