reactjs - 如何在行中放置自定义按钮标签,使用 material-table 和 typeScript,他希望收到的 Prop 是什么?

标签 reactjs typescript material-ui material-table

我有一些问题:) 我尝试在我的表格的每一行中放置一个 Avatar 标签并编辑 Button,并将编辑按钮带到两者。 如何将操作移动到表格的右侧? 如何撤消表格顶部的“操作”标题? 如果我在以下示例中使用 TS,我应该传递什么“PROPS”:

    <MaterialTable
      icons={tableIcons}
      columns={this.state.columns}
      data={this.state.data}
      title='Users Management'

      actions={[
        {
          icon: 'edit',
          tooltip: 'Edit User',
          onClick: (event) => { alert('Edit!!'); },
        },
        {
          icon: 'avatar',
          tooltip: 'Avatar User',
          onClick: (event) => { alert("You want to delete "); }
        }
      ]}

    components={{
      Action: **props** => (
        <Button
          onClick={(event: any) => props.action.onClick}>
          EDIT
        </Button>
      ),
    }}
    />

enter image description here

最佳答案

所以让我们把这个问题分成几个部分:

  1. 如何撤消表格顶部的“操作”标题?您可以简单地覆盖 localization={{header.actions: 'Test'}} Prop 来更改操作列标题以更改它,例如去测试。您还可以添加一个空格来隐藏它。

  2. 如何将操作移动到表格的右侧?您可以将 options={{actionsColumnIndex: 1}} 覆盖为例如将其移动到第二个位置或将其设置为 -1 以将其移动到所有列的末尾。

  3. 这两个都需要编辑按钮。由于您不提供自定义元素,因此它会呈现文本。您必须按照 readme 中的说明导入 icons={tableIcons} .要显示头像图标,只需将头像对象添加到 tableIcons 对象即可。

  4. 要知道要传递哪些 Prop ,请看这个 docs页面。

关于reactjs - 如何在行中放置自定义按钮标签,使用 material-table 和 typeScript,他希望收到的 Prop 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59801521/

相关文章:

javascript - 在 React JS 中构建引导模式和通知的正确方法?

javascript - 动态图像源

javascript - Angular 6 *ngIf 动画排序

typescript - MUI v5 类型在 WebStorm 中没有代码完成建议

javascript - React 模块和包装 Google Recaptcha

reactjs - react typescript : Map over an array and insert values from an object with a shared key

Angular2 将纯文本转换为 url( anchor 链接)的方法

javascript - 为什么 TypeScript 将 .default 添加到全局定义的导入中?

css - 在多列的material-ui表格上添加水平滚动的方法是什么?

reactjs - 如何在 Material UI 网格中添加水平滚动