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?
Advertisement
Answer
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' }, ]}
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; }