如何在ag-grid/adaptable grid中将空单元格显示为‘-’？

方法一：使用值格式化器（Value Formatter） #

这是最简便的实现方式，直接在列配置中添加值格式化函数，判断单元格值为空时返回‘-’：

const columnDefs = [
  { field: 'Finance', headerName: 'Finance' },
  { 
    field: 'May2020', 
    headerName: 'May 2020',
    valueFormatter: params => {
      // 处理undefined、null、空字符串等空值情况
      return params.value == null || params.value === '' ? '-' : params.value;
    }
  },
  { 
    field: 'May2021', 
    headerName: 'May 2021',
    valueFormatter: params => {
      return params.value == null || params.value === '' ? '-' : params.value;
    }
  }
];

如果希望全局所有列都应用这个规则，可以配置gridOptions中的defaultColDef：

const gridOptions = {
  defaultColDef: {
    valueFormatter: params => {
      return params.value == null || params.value === '' ? '-' : params.value;
    }
  },
  columnDefs: [...]
};

方法二：使用单元格渲染器（Cell Renderer） #

如果需要更复杂的渲染逻辑（比如自定义样式），可以自定义单元格渲染器：

const columnDefs = [
  { field: 'Finance', headerName: 'Finance' },
  { 
    field: 'May2020', 
    headerName: 'May 2020',
    cellRenderer: params => {
      const displayValue = params.value == null || params.value === '' ? '-' : params.value;
      return `<span style="color: #666">${displayValue}</span>`;
    }
  }
];

适配Adaptable Grid的说明 #

由于Adaptable Grid基于AG Grid构建，上述所有AG Grid的配置方式都完全适用，直接在Adaptable Grid的初始化配置中传入对应的columnDefs或gridOptions即可。

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