我似乎不知道如何在 Material 表右上角的“操作”部分中放置自定义下拉组件。覆盖操作组件不会呈现任何内容。
下面是我使用不同的表格库得到的结果,但我想要使用 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
/>
)
}}
/>
自定义 Material 表
import MaterialTable from 'material-table'
import React from 'react'
export default function CustomMaterialTable (props) {
return (
<MaterialTable {...props} />
)
}
最佳答案
我认为您所要求的可以通过覆盖 Action 组件来完成,如此处所述,docs .
接下来我得到了这个:
当然,您需要在样式方面做一些工作,但这可能会为您指明正确的方向。
表定义,查看组件和操作属性:
<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
}
]}
/>
沙盒 here .
我不知道您到底在寻找什么,但我在表格中添加了过滤选项。也许这可能是过滤数据的不同方式,而不必覆盖组件并不必对抗内置样式。
希望这有帮助!祝你好运
关于reactjs - 将下拉组件添加到 Material 表操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62802204/