用“其他文本”或“图标”覆盖物料表头上的文本“动作”

时间:2019-10-21 16:30:59

标签: reactjs material-table

我正在使用ReactJs在材质表上工作,我需要在列标题上输入文本“ Actions”,以使该操作可以被其他文本或任何其他图标覆盖

请需要你们的帮助才能实现

示例

实际-名|姓|动作

需要-名|姓|其他文字或图标(用于操作)

const操作= [       {         图标:“编辑”,         工具提示:“编辑订单”       }     ];

const components = {
  Action: props => (
    <ProposalListMenu
      row={props.data}
      editAction={this.props.editAction}
      handleViewProposal={this.handleViewProposal}
      globalSearch={false}
      proposalId={this.state.proposalId}
      showGenerateOrder={this.state.showGenerateOrder}
      handleGenerateOrderPopUp={this.handleGenerateOrderPopUp}
      handleGenerateOrderClose={this.handleGenerateOrderClose}
      showGeneratedOrderList={this.props.showGeneratedOrderList}
      {...this.state}
    ></ProposalListMenu>
  ),
  Toolbar: props => (
    <div>
      <MTableToolbar {...props} />
      <div style={{ padding: "0px 10px", "text-align": "right" }}>
        <ColumnConfigure
          columns={this.state.columns}
          toggleColumn={this.handleTableColumnConfig}
          resetAllColumn={this.handleResetAllColumns}
          openFlag={this.state.openFlag}
        />
      </div>
    </div>
  )
};
return {
  title: title,
  options: options,
  actions: actions,
  components: components
};

}; enter image description here

2 个答案:

答案 0 :(得分:1)

要覆盖标题actions: 'Actions'“操作”
修改材料表本地化设置

https://material-table.com/#/docs/features/localization

header: {
            actions: 'Actions' //  actions: 'Any text'
        },

答案 1 :(得分:0)

您可以通过使用材料表的本地化属性来实现这一点。

<Table
  ...
  localization={{
    header: {
      actions: "your other text"
    }
  }}
/>