如何修改ag-grid-react侧边栏搜索框的占位符？

针对你使用的ag-grid-react 31.1.1 + React 18.2，有两种方式修改侧边栏（列工具面板）的搜索框占位符：

方法一：单独配置目标工具面板 #

直接在toolPanelParams中添加searchPlaceholder参数，指定自定义占位文本：

export const defaultSidebarDef = {
  toolPanels: [
    {
      id: 'columns',
      labelDefault: 'Columns',
      labelKey: 'columns',
      iconKey: 'columns',
      toolPanel: 'agColumnsToolPanel',
      minWidth: 180,
      maxWidth: 400,
      width: 250,
      toolPanelParams: {
        suppressRowGroups: true,
        suppressValues: true,
        suppressPivotMode: true,
        // 添加自定义占位文本
        searchPlaceholder: '输入列名搜索'
      },
    },
  ],
  position: 'right',
  defaultToolPanel: '',
};

方法二：全局修改文本（多语言/统一替换场景） #

如果需要全局替换AG Grid的默认文本，可在AgGridReact组件中配置localeText属性，覆盖columnsToolPanel.searchColumns对应的默认文本：

<AgGridReact
  ref={gridRef}
  getRowId={getRowId}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  sideBar={defaultSidebarDef}
  rowSelection={'multiple'}
  suppressRowClickSelection={true}
  rowModelType={'serverSide'}
  cacheBlockSize={SEARCH_SERVICE_CONFIGS.LIMIT_DEFAULT}
  onGridReady={onGridReady}
  onModelUpdated={(event) => onModelUpdated(event, gridViewStateManager)}
  statusBar={statusBar}
  suppressDragLeaveHidesColumns
  noRowsOverlayComponent={NoRowsOverlay}
  noRowsOverlayComponentParams={noRowsOverlayComponentParams}
  suppressContextMenu={true}
  suppressBrowserResizeObserver={true}
  onSortChanged={onSortChanged}
  context={{
    t,
    tool: {
      id: tool,
    },
    projectCountry,
  }}
  // 添加全局文本配置
  localeText={{
    'columnsToolPanel.searchColumns': '输入列名搜索'
  }}
/>

两种方法按需选择：方法一仅作用于当前配置的列工具面板，方法二会全局替换所有列工具面板的搜索框占位符。

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