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

Question

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?

Answer 1

this list of type you can choose :

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

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