如何在行中放置自定义按钮标签,使用 material-table 和 typeScript,他希望收到的道具是什么?
how to put a custom button tag in rows, use material-table and typeScript, and what are the props he expects to receive?
我有一些问题:)
我尝试在我的 table 和编辑按钮的每一行中放置一个 Avatar 标签,并将编辑按钮用于两者。
如何将操作移动到 table 的右侧?
如何撤消 table 顶部的 "Actions" 标题?
如果我在以下示例中使用 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
所以让我们把这个问题分成几个部分:
如何取消 table 顶部 "Actions" 的标题?您可以简单地覆盖 localization={{header.actions: 'Test'}}
道具来更改操作列标题以更改它,例如去测试。也可以加一个白色的space来隐藏
如何将操作移动到 table 的右侧?您可以将 options={{actionsColumnIndex: 1}}
覆盖为例如将其移动到第二个位置或将其设置为 -1 以将其移动到所有列的末尾。
两者都需要编辑按钮。由于您不提供自定义元素,因此它会呈现文本。您必须按照 readme 中的说明导入 icons={tableIcons}
。要显示头像图标,只需将头像 object 添加到您的 tableIcons
object。
要了解要传递哪些道具,请查看此 docs 页面。
我有一些问题:) 我尝试在我的 table 和编辑按钮的每一行中放置一个 Avatar 标签,并将编辑按钮用于两者。 如何将操作移动到 table 的右侧? 如何撤消 table 顶部的 "Actions" 标题? 如果我在以下示例中使用 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
所以让我们把这个问题分成几个部分:
如何取消 table 顶部 "Actions" 的标题?您可以简单地覆盖
localization={{header.actions: 'Test'}}
道具来更改操作列标题以更改它,例如去测试。也可以加一个白色的space来隐藏如何将操作移动到 table 的右侧?您可以将
options={{actionsColumnIndex: 1}}
覆盖为例如将其移动到第二个位置或将其设置为 -1 以将其移动到所有列的末尾。两者都需要编辑按钮。由于您不提供自定义元素,因此它会呈现文本。您必须按照 readme 中的说明导入
icons={tableIcons}
。要显示头像图标,只需将头像 object 添加到您的tableIcons
object。要了解要传递哪些道具,请查看此 docs 页面。