material-table如何做selectable和editabletable?
material-table How to do selectable and editable table?
我想做这个(选择一些动作,每行一些动作)。请帮忙,谢谢!
我使用 material-table
和 ReactJS
。现在我在每一行上都有动作而不能选择,如果添加选择道具这些动作就会消失。我不知道如何将每行操作与多个操作结合起来..
源码中的the exact place决定当selection
属性设置为true时是否显示操作列:
if (this.props.actions && this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection).length > 0) {
// ...
}
另一个这样的地方在renderActions
method:
const actions = this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection);
所以它要么必须是 isFreeAction
,要么 selection
应该设置为 false。目前您可以自定义它的唯一方法是覆盖 Row
组件 - 基本上 copy/paste 它,修改这些条件,将结果作为新组件导入并在 components
[ material-table
配置的 =36=] 作为 Row
.
的覆盖
您可以将 position: 'row'
道具添加到操作中。 position
属性有 4 个选项可用:auto
'、toolbar
、toolbarOnSelect
、row
这个最小的代码片段应该可以工作
<MaterialTable
actions={[
{
icon: 'save',
tooltip: 'Save User',
position: 'row',
onClick: (event, rowData) => alert('You saved ' + rowData.name)
},
{
icon: 'delete',
tooltip: 'Delete User',
position: 'row',
onClick: (event, rowData) =>
alert('You want to delete ' + rowData.name)
}
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }
}
]}
data={[
{
name: 'Mehmet',
surname: 'Baran',
birthYear: 1987,
birthCity: 63
},
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34
}
]}
options={{
selection: true,
actionsColumnIndex: -1
}}
title="Positioning Actions Column Preview"
/>
我想做这个(选择一些动作,每行一些动作)。请帮忙,谢谢!
我使用 material-table
和 ReactJS
。现在我在每一行上都有动作而不能选择,如果添加选择道具这些动作就会消失。我不知道如何将每行操作与多个操作结合起来..
源码中的the exact place决定当selection
属性设置为true时是否显示操作列:
if (this.props.actions && this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection).length > 0) {
// ...
}
另一个这样的地方在renderActions
method:
const actions = this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection);
所以它要么必须是 isFreeAction
,要么 selection
应该设置为 false。目前您可以自定义它的唯一方法是覆盖 Row
组件 - 基本上 copy/paste 它,修改这些条件,将结果作为新组件导入并在 components
[ material-table
配置的 =36=] 作为 Row
.
您可以将 position: 'row'
道具添加到操作中。 position
属性有 4 个选项可用:auto
'、toolbar
、toolbarOnSelect
、row
这个最小的代码片段应该可以工作
<MaterialTable
actions={[
{
icon: 'save',
tooltip: 'Save User',
position: 'row',
onClick: (event, rowData) => alert('You saved ' + rowData.name)
},
{
icon: 'delete',
tooltip: 'Delete User',
position: 'row',
onClick: (event, rowData) =>
alert('You want to delete ' + rowData.name)
}
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }
}
]}
data={[
{
name: 'Mehmet',
surname: 'Baran',
birthYear: 1987,
birthCity: 63
},
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34
}
]}
options={{
selection: true,
actionsColumnIndex: -1
}}
title="Positioning Actions Column Preview"
/>