CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Aymen LMIR
Aymen LMIR

Reputation: 91

Align column content to the right of cell React MUIDataTable

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.

Upvotes: 2

Views: 5896

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34176

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

Upvotes: 4

Daniyal Malik
Daniyal Malik

Reputation: 608

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.

Upvotes: 1

Related Questions