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

Question

我在我的 React 项目中使用 MUI。当我将列的类型设置为type: "number"列标题并且数据向右对齐时。我在 MUI 文档中的简单示例中重现了该问题：codesandbox

第三列age有type: "number"并且所有内容都向右对齐。但其他具有默认类型的列 - 位于左侧。

如何将列的标题和数据向左对齐type: "number"？

Answer 1

您可以选择此类型列表：

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

以及你拥有的对齐列表：

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

Answer 2

要对齐标题和列数据，请使用GridColDef 的headerAlign和属性。align

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

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

const rows = ...

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