React MUI Datagrid align column data and header with type "number"

user_14830735 0
Viewed 6050

I'm using MUI in my react project. When I set the type of a column to type: "number" the column header and data align to the right. I reproduced the issue at the simple example from MUI documentation: codesandbox

The third column age has type: "number" and everything alignes to the right. But other columns with default types - to the left.

How can I align header and data of a column with type: "number" to the left?

material-ui reactjs datagrid javascript
3 Answers

this list of type you can choose :

declare type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect';

and list of aligns you have :

declare type GridAlignment = 'left' | 'right' | 'center';

how can you use :

  columns={[
          {
            field: 'id',
            flex: 1,
            minWidth: 150,
            type:"number",
            align:'left'
          },
]}

codesandbox link

and for more information, it is a list of properties you can use in column object :

interface GridColDef {
    field: string;
    headerName?: string;
    description?: string;
    width?: number;
    flex?: number;
    minWidth?: number;
    hide?: boolean;
    sortable?: boolean;
    resizable?: boolean;
    editable?: boolean;
    sortComparator?: GridComparatorFn;
    type?: GridColType;
    valueOptions?: Array<string | number | {
        value: any;
        label: string;
    }>;
    align?: GridAlignment;
    valueGetter?: (params: GridValueGetterParams) => GridCellValue;
    valueFormatter?: (params: GridValueFormatterParams) => GridCellValue;
    valueParser?: (value: GridCellValue, params?: GridCellParams) => GridCellValue;
    cellClassName?: GridCellClassNamePropType;
    renderCell?: (params: GridRenderCellParams) => React$1.ReactNode;
    renderEditCell?: (params: GridRenderEditCellParams) => React$1.ReactNode;
    headerClassName?: GridColumnHeaderClassNamePropType;
    renderHeader?: (params: GridColumnHeaderParams) => React$1.ReactNode;
    headerAlign?: GridAlignment;
    hideSortIcons?: boolean;
    disableColumnMenu?: boolean;
    filterable?: boolean;
    filterOperators?: GridFilterOperator[];
    disableReorder?: boolean;
    disableExport?: boolean;
}
user_129021080

To align header and column data, use both headerAlign and align props for GridColDef.

const columns: GridColDef[] = [
{
  field: 'age',
  headerName: 'Age',
  flex: 1,
  editable: false,

  headerAlign: 'center',
  align: 'center'
}]

const rows = ...

<DataGrid
  rows={rows}
  columns={columns}
/>
user_140005680

If you use bootstrap in your project this solution may help you

<div className="d-flex flex-row w-100">
    <div className="col-auto" type="number">your number</div>
    <div className="col">your text</div>
</div>

you can insert your number in number field

user_73873450
Related