如何让ag-grid表格单元格完整显示输入文本？

Hey there! I’ve dealt with this exact issue before when migrating Excel tools to ag-Grid, so let’s get your cells showing full input text just like Excel does. Here are practical, tested solutions:

1. Enable Text Wrapping & Auto-Height for Cells #

The simplest fix is to turn on text wrapping and let ag-Grid automatically adjust cell heights to fit content. Update your column definitions:

const columnDefs = [
  {
    headerName: "Your Data Column",
    field: "yourDataField",
    // Allow text to wrap instead of truncating
    wrapText: true,
    // Auto-adjust cell height to fit wrapped text
    autoHeight: true,
    // Use the built-in text editor (explicit setting avoids confusion)
    cellEditor: "agTextCellEditor",
    // Ensure the editor also supports wrapped text
    cellEditorParams: {
      wrapText: true,
      autoHeight: true
    }
  }
];

2. Auto-Adjust Column Width to Fit Content #

If you prefer no wrapping and want columns to expand to fit long text, use ag-Grid’s built-in sizing methods. Call this after your data finishes loading:

// Trigger once grid is ready and data is populated
gridApi.sizeColumnsToFit();

Or set a flex value on your column to let it dynamically take up available space:

{
  headerName: "Flexible Column",
  field: "flexField",
  flex: 1 // Adjust the number based on how much space you want the column to occupy
}

3. Custom Cell Editor for Unrestricted Text View #

Sometimes the default editor clips text unexpectedly. Create a custom textarea editor to ensure full visibility:

// Define the custom editor component
const FullTextEditor = {
  init(params) {
    this.textarea = document.createElement("textarea");
    this.textarea.value = params.value || "";
    // Style to fill the cell completely without clipping
    this.textarea.style.width = "100%";
    this.textarea.style.height = "100%";
    this.textarea.style.resize = "none";
    this.textarea.style.border = "none";
    this.textarea.style.padding = "4px";
    params.eGridCell.appendChild(this.textarea);
  },
  getValue() {
    return this.textarea.value;
  },
  destroy() {
    this.textarea.remove();
  }
};

// Use the custom editor in your column definition
{
  headerName: "Custom Full-Text Column",
  field: "customField",
  cellEditor: FullTextEditor,
  wrapText: true,
  autoHeight: true
}

4. Fix CSS That Clips Text #

Ag-Grid’s default CSS sometimes hides overflowing text. Override it with custom styles (target specific columns to avoid breaking other parts of the grid):

First, add a cell class to your column:

{
  headerName: "Styled Column",
  field: "styledField",
  cellClass: "full-text-cell"
}

Then add this CSS:

.full-text-cell {
  white-space: pre-wrap !important; /* Preserve line breaks and wrap text naturally */
  overflow: visible !important; /* Show all text instead of clipping it */
}

Start with the first method—it’s the most straightforward and should get your cells behaving just like Excel’s in most cases.

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