Override text "Actions" on material table head with "other text" or "icon"

Viewed 3790

I am working on material table with ReactJs, I need the text "Actions" on column head for the action to be override with other text or any other icon

Please need you guys help to achieve it

Example

Actual - First Name | last Name | Actions

Need - First Name | last Name | Other text or Icon (for Actions)

const actions = [ { icon: "edit", tooltip: "Edit Order" } ];

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 Answers

To override the header actions: 'Actions' "Actions"
Modify the material table localization setting

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

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

You can achieve this by using the localization attribute of the material table.

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