如何在React Ag Grid中实现带徽章/图片的文本动态省略

问题描述 #

在React Ag Grid中，某列内容包含文本及可选徽章/图片，需要实现以下效果：

• 列宽缩小或窗口变小时，文本部分自动显示省略号，徽章始终保持可见不被隐藏
• 列宽扩大时，文本自动展开，文本过长时仍保留省略号

现有方案痛点 #

之前的实现方式通过监听列宽变化、维护columnWidth状态来计算文本span的宽度，需要为每列单独维护状态，代码冗余且繁琐。

优化实现方案 #

推荐使用CSS Flex布局实现自适应宽度，无需监听列宽或维护状态，完全靠布局规则达成需求，且支持多列复用。

1. 样式定义（两种方式可选） #

方式一：styled-components

import styled from 'styled-components';

const CellContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 8px; /* 文本与徽章的间距，可按需调整 */
`;

const TextWithEllipsis = styled.span`
  flex: 1; /* 占据容器剩余所有宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const BadgeWrapper = styled.span`
  flex-shrink: 0; /* 禁止徽章被压缩，始终保持原有尺寸 */
`;

方式二：普通CSS

.cell-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-with-ellipsis {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-wrapper {
  flex-shrink: 0;
}

2. 自定义CellRenderer #

import { ICellRendererParams } from 'ag-grid-community';
// 导入你的Badge组件及判断函数
import { Badge } from './your-components';
import { checkIfBadgeIsNeededFunc } from './utils';

// 用styled-components的写法
export const FlexibleCellRenderer = (props: ICellRendererParams) => {
  const hasBadge = checkIfBadgeIsNeededFunc(props);

  return (
    <CellContainer>
      <TextWithEllipsis>{props.value}</TextWithEllipsis>
      {hasBadge && (
        <BadgeWrapper>
          <Badge />
        </BadgeWrapper>
      )}
    </CellContainer>
  );
};

// 用普通CSS的写法（替换上面的Renderer）
export const FlexibleCellRenderer = (props: ICellRendererParams) => {
  const hasBadge = checkIfBadgeIsNeededFunc(props);

  return (
    <div className="cell-container">
      <span className="text-with-ellipsis">{props.value}</span>
      {hasBadge && (
        <span className="badge-wrapper">
          <Badge />
        </span>
      )}
    </div>
  );
};

3. 列配置复用 #

直接将同一Renderer应用到所有需要的列即可，无需单独处理：

export const colDefs = [
  {
    headerName: '名称',
    field: 'name',
    enableRowGroup: true,
    rowGroupIndex: 2,
    hide: true,
    cellRenderer: FlexibleCellRenderer,
  },
  {
    headerName: 'ID',
    field: 'id',
    enableRowGroup: true,
    rowGroupIndex: 1,
    hide: true,
    cellRenderer: FlexibleCellRenderer,
  },
];

4. 网格尺寸变化处理 #

使用Flex布局后，无需手动触发重绘，Ag Grid会自动适配列宽变化，仅保留sizeColumnsToFit即可：

const onGridSizeChanged = (params: any) => {
  params.api.sizeColumnsToFit();
};

方案优势 #

• 无需监听列宽变化、维护状态，代码简洁易维护
• 同一Renderer可复用至所有需要的列，无冗余代码
• 完全依赖CSS布局规则，适配性更强，窗口/列宽调整时自动生效

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