React MUI Datagrid将列数据和标题与类型“number”对齐

Question

我在react项目中使用了MUI。当我将列的类型设置为type:“number”时，列标题和数据向右对齐。我在MUI文档中的简单示例中重现了这个问题：codesandbox

第三列age有类型：“number”，所有内容都向右对齐。但其他列的默认类型-在左侧。

如何将列的标题和数据与左侧的类型：“number”对齐？

Answer 1

如果您在项目中使用引导，此解决方案可能会对您有所帮助

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

您可以在数字字段中插入您的号码

Answer 2

此列表列出了您可以选择的类型：

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

以及您拥有的路线列表：

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

如何使用：

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

代码沙盒链接

有关更多信息，请参见列对象中可使用的属性列表：

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