reactjs 在材料表头上显示带有“其他文本”或“图标”的文本“操作”

9vw9lbht  于 11个月前  发布在  React
关注(0)|答案(3)|浏览(158)

我正在使用ReactJs材料表工作,我需要在列标题上的文本“操作”,以便用其他文本或任何其他图标覆盖操作
请需要你们的帮助来实现它
例如
实际-名字|姓氏|行动
需求-名字|姓氏|其他文本或图标(用于操作)
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
};

字符串
};

5cg8jx4n

5cg8jx4n1#

覆盖标题actions: 'Actions'“操作”
修改材质表本地化设置
https://material-table.com/#/docs/features/localization

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

字符串

exdqitrt

exdqitrt2#

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

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

字符串

pdsfdshx

pdsfdshx3#

本地化:{ actions:“Do”,
// https://www.material-react-table.com/docs/guides/localization

// https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/locales/en.ts
        // move: <div>'DND'</div>   ,

        move: 'Drag',
    },

字符串

相关问题