[英]Add Dropdown Component to Material-Table Actions
我似乎无法弄清楚如何在材料表右上角的“操作”部分中放置自定义下拉组件。 覆盖动作组件不会呈现任何内容。
下面是我使用不同的表格库的内容,但我打算使用 Material-Table。
当前代码
<CustomMaterialTable
title='Data Comparison'
columns={tableCols}
data={tableData}
options={{
exportButton: true,
exportCsv: (columns, data) => { csvDownload(data, buildFileName(stateName)) },
pageSize: tableData.length
}}
components={{
Container: props => props.children,
Action: props => (
<YearDropDown
year={year}
type='secondary'
minWidth='full'
handleChange={handleYearChange}
variant='outlined'
required
/>
)
}}
/>
自定义材料表
import MaterialTable from 'material-table'
import React from 'react'
export default function CustomMaterialTable (props) {
return (
<MaterialTable {...props} />
)
}
我认为您所要求的可以通过覆盖 Action 组件来完成,如此处解释的docs 。
之后我得到了这个:
当然,您需要在样式方面做一些工作,但这可能会为您指明正确的方向。
表定义,看组件和action props:
<MaterialTable
tableRef={tableRef}
columns={tableColumns}
data={tableData}
title="Custom Free Action example"
options={{
tableLayout: "fixed",
actionsColumnIndex: -1,
search: false,
filtering: true
}}
components={{
Action: props => (
<div
style={{
marginBottom: "5rem",
marginTop: "1rem",
width: "150px"
}}
>
<Select
options={selectData}
/>
</div>
)
}}
actions={[
{
onClick: (event, rowData) => alert("something"),
isFreeAction: true
}
]}
/>
沙箱在这里。
我不确切知道您在寻找什么,但我在表格中添加了过滤选项。 也许这可能是一种过滤数据的不同方法,而不必覆盖组件并且不必与内置 styles 作斗争。
希望这可以帮助! 祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.