如何在原生JavaScript中为ag-Grid设置全局默认配置？

方案1：抽离基础配置模板，实例化时合并差异 #

把所有实例的公共配置抽成独立的基础对象，每个实例仅传入独有的配置（比如columnDefs、rowData），通过扩展运算符合并，彻底避免重复代码。

// 单独文件导出全局基础配置（比如ag-grid-config.js）
export const baseGridOptions = {
  defaultColDef: {
    sortable: true,
    resizable: false,
    filter: true,
    filterParams: {
      buttons: ['reset', 'apply'],
      closeOnApply: true,
      maxNumConditions: 1
    },
    tooltipValueGetter: (params) => {
      const { value } = params;
      if (value === null || typeof value === 'boolean') return null;
      if (typeof value === 'string' && value.isDate()) return moment(new Date(value)).format('DD MMM YYYY HH:mm');
      return value;
    },
    floatingFilter: true,
    suppressMovable: true,
    cellClass: '!border-none !flex !items-center !text-sm'
  },
  rowHeight: 50,
  suppressDragLeaveHidesColumns: true,
  autoSizeStrategy: {
    type: 'fitGridWidth'
  },
  enableCellTextSelection: true,
  ensureDomOrder: true
};

// 单个实例使用时
import { baseGridOptions } from './ag-grid-config';

// 用户列表实例配置
const userGridOptions = {
  ...baseGridOptions,
  columnDefs: userColumnDefs,
  rowData: userRowData
};

// 订单列表实例配置，可覆盖全局配置
const orderGridOptions = {
  ...baseGridOptions,
  columnDefs: orderColumnDefs,
  rowData: orderRowData,
  defaultColDef: {
    ...baseGridOptions.defaultColDef,
    resizable: true // 单独开启该实例的列拖拽调整
  }
};

方案2：封装全局Grid组件（框架场景下） #

如果是React/Vue/Angular项目，直接封装一个内置全局配置的AG Grid组件，外部仅传入必要的差异化参数，实现配置统一管理。

以React为例：

// AgGridGlobal.jsx
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { baseGridOptions } from './ag-grid-config';

const AgGridGlobal = ({ columnDefs, rowData, gridOptions = {} }) => {
  const mergedOptions = {
    ...baseGridOptions,
    columnDefs,
    rowData,
    ...gridOptions // 允许外部临时覆盖全局配置
  };

  return (
    <div className="ag-theme-alpine">
      <AgGridReact {...mergedOptions} />
    </div>
  );
};

export default AgGridGlobal;

// 业务页面使用
import AgGridGlobal from './AgGridGlobal';

// 用户列表页
<UserPage>
  <AgGridGlobal columnDefs={userColumnDefs} rowData={userRowData} />
</UserPage>

// 订单列表页，修改行高
<OrderPage>
  <AgGridGlobal 
    columnDefs={orderColumnDefs} 
    rowData={orderRowData}
    gridOptions={{ rowHeight: 60 }}
  />
</OrderPage>

方案3：使用AG Grid内置全局默认配置（推荐） #

AG Grid 提供setGridOptionDefaults方法（社区版/企业版均支持），可在项目入口一次性设置全局默认配置，所有实例自动继承，无需手动合并。

// 在项目入口文件（比如main.js/index.js）配置
import { GridOptionsService } from 'ag-grid-community';

GridOptionsService.setGridOptionDefaults({
  defaultColDef: {
    sortable: true,
    resizable: false,
    filter: true,
    filterParams: {
      buttons: ['reset', 'apply'],
      closeOnApply: true,
      maxNumConditions: 1
    },
    tooltipValueGetter: (params) => {
      const { value } = params;
      if (value === null || typeof value === 'boolean') return null;
      if (typeof value === 'string' && value.isDate()) return moment(new Date(value)).format('DD MMM YYYY HH:mm');
      return value;
    },
    floatingFilter: true,
    suppressMovable: true,
    cellClass: '!border-none !flex !items-center !text-sm'
  },
  rowHeight: 50,
  suppressDragLeaveHidesColumns: true,
  autoSizeStrategy: {
    type: 'fitGridWidth'
  },
  enableCellTextSelection: true,
  ensureDomOrder: true
});

// 后续创建实例只需传入独有配置
const userGridOptions = {
  columnDefs: userColumnDefs,
  rowData: userRowData
};

// 特殊实例可覆盖全局配置
const specialGridOptions = {
  columnDefs: specialColumnDefs,
  rowData: specialRowData,
  defaultColDef: {
    ...GridOptionsService.getGridOptionDefaults().defaultColDef,
    resizable: true
  }
};

内容的提问来源于stack exchange，提问作者Anmol Malik