AgGrid 自定义column组件

自定义 column 组件

使用场景：在column中放入自定义组件，比如自定义按钮组件,而不是常规的纯数据展示。

// 收集在 AgGrid中自定义的column组件，此处有组件aaa, bbb
components = {
    aaa: this.aaa,
    bbb: this.bbb,
    ...
}

// 组件aaa为一个图标按钮，点击可变化图标
aaa = (params: any) => {
   let data = params.node.data;
   return (
     <div style={{ paddingLeft: '27.5px' }}>
       <CheckAAA
         checked={params.value}
         checkedImgSrc={VisibleIcon}
         uncheckedImgSrc={InVisibleIcon}
         onClick={() => this.change(data.isVisible!, data.id)}
       />
     </div>
   );
 };

getColumns= () => {
	let columns: ColDef[] = [];
	columns = [
        ...
        {
          headerComponent: 'title',
          field: 'visible',
          width: 50,
          cellRenderer: 'aaa', // 此处表示该column 使用组件 aaa
        },
        ...
}
render() {
	return (
	    <div style={containerStyle}>
	      <div style={gridStyle} className="ag-theme-alpine">
	        <AgGridReact
	          ...
	          columnDefs={this.getColumns()} // 定义column
	          frameworkComponents={this.components} // 定义自定义组件
	          ...
	        ></AgGridReact>
	      </div>
	    </div>
	);
}