ag-grid + react app - 点击更新列宽

Question

我在我的应用程序中使用 ag-grid 包来显示 table 数据。现在我需要根据用户操作更改 table 中的特定列宽。即用户点击一列，第二次点击后该列的宽度扩大到一定像素，应该是初始的。

我已经从活动列中获得了所有必要的值（如 id、宽度等），但找不到更改列宽的正确方法并且不会从活动中失去焦点状态细胞.

欢迎提出任何建议。感谢您的回复和建议。

Answer 1

您可以从任何网格事件中获得columnApi。 columnApi 公开了一个可用于您的用例的函数： columnApi.setColumnWidth(colKey, newWidth, finished = true) 您可以在官方网站上阅读更多内容 docs。

Answer 2

通过 useRef 使用 Hooks

const {useRef} = React;
// Example stateless functional component
const SFC = props => {
  
  const divRef = useRef(null)
  
  const changeWidth = () => {
    if (divRef.current){
      divRef.current.style.height = "100px"
    }
  }
  
  return(<div>
          <div style={{backgroundColor:"#000000", height:"50px"}} ref={divRef}>test</div>
          <button type="button" onClick={changeWidth}>Change me</button>
         </div>)
};

// Render it
ReactDOM.render(
  <SFC/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script></script>

ag-grid + react app - 点击更新列宽

ag-grid + react app - update column width on click

reactjs

ag-grid