場景業務：

多次運用AgGridReact的table 列表

思路：

運用自定義hooks進行二次封裝：
通用配置例如：傳參的參數，傳參的url，需要緩存的key這些鍵值類
定制化配置例如：需要對table 的一些定制化傳參，是否需要分頁，表頭配置，表頭搜索配置

通用配置：

  const { SettingTableRender, TableListRender, getTableData,resetSesstion,tableData } = useTableModule({renderKey: {companyName: renderContext,contacts: EllipsisCommont,industries: industriesCell,serviceTypes: bdInfosServiceTypes,businessProgress: bdInfosBusinessProgress,latestFollowUpDate,latestNoteCreatedTime,associationLabel,estimatedDealDate,dealDate:dealTime,website:websiteCell,salesLeadOwner:ownerCell,businessOpportunityLeader:ownerCell,accountManager:ownerCell},configKey: 'COMPANY_AFFILIATES',tableUrl: 'apiurl',tableRequest: getTableList,setParamsList,sessionKey:'tableList'});

定制配置：

    {/* 列表 */}{TableListRender({pagination: false,customColumn,key: tabActive,filterSearchRender: {companyName: {render: SelectCompanyName,},contacts: {render: SelectCompanyName,},associationLabel: {render: Select,tPropty: {options: associationLabelOp,},},industries: {render: TreeSelect,tPropty: {treeData: listEnum('industry'),showCheckedStrategy: TreeSelect.SHOW_PARENT,treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'id', label: 'label', children: 'children' },},},serviceTypes: {render: TreeSelect,tPropty: {treeData: listEnum('serviceType'),showCheckedStrategy: TreeSelect.SHOW_PARENT,treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'name', label: 'label', children: 'children' },},},businessProgress: {render: TreeSelect,tPropty: {treeData: listEnum('businessProgress').filter((i) =>['ACCOUNT_BUSINESS_NOT_FOLLOWED_UP','ACCOUNT_BUSINESS_CUSTOMER_NOT_CONTACTED','ACCOUNT_BUSINESS_PLAN_COMMUNICATION','ACCOUNT_BUSINESS_PLAN_VERIFICATION','ACCOUNT_BUSINESS_NEGOTIATION','ACCOUNT_BUSINESS_CONTRACTED','ACCOUNT_BUSINESS_LOST',].includes(i.name)),treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'value', label: 'label', children: 'children' },},},salesLeadOwner: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},businessOpportunityLeader: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},accountManager: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},},})}

非常靈活的表單，基于ag-table 的基礎功能拖拽，自定義寬度的前提下額外拓展業務需求：自定義表頭，自定義表頭的sort，以及自定義搜索功能。

重點是在于思路的拓展。