Estoy usando MUI en mi proyecto de reacción. Cuando configuro el tipo de una columna para type: "number" , el encabezado de la columna y los datos se alinean a la derecha. Reproduje el problema en el ejemplo simple de la documentación de MUI: codesandbox
La tercera columna age tiene type: "number" y todo se alinea a la derecha. Pero otras columnas con tipos predeterminados, a la izquierda.
¿Cómo puedo alinear el encabezado y los datos de una columna con el type: "number" a la izquierda?
esta lista de tipo que puede elegir:
declare type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect';y la lista de alineaciones que tiene:
declare type GridAlignment = 'left' | 'right' | 'center';como puedes usar:
columns={[ { field: 'id', flex: 1, minWidth: 150, type:"number", align:'left' }, ]}y para obtener más información, es una lista de propiedades que puede usar en el objeto de columna:
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; }Para alinear los datos del encabezado y la columna, use los headerAlign y align para GridColDef.
const columns: GridColDef[] = [ { field: 'age', headerName: 'Age', flex: 1, editable: false, headerAlign: 'center', align: 'center' }] const rows = ... <DataGrid rows={rows} columns={columns} />Si usa bootstrap en su proyecto, esta solución puede ayudarlo
<div className="d-flex flex-row w-100"> <div className="col-auto" type="number">your number</div> <div className="col">your text</div> </div>puede insertar su número en el campo de número