[英]Add Dropdown Component to Material-Table Actions
I can't seem to figure out how to place a custom dropdown component within the Action section in the top right portion of the material-table.我似乎无法弄清楚如何在材料表右上角的“操作”部分中放置自定义下拉组件。 Overriding the action component doesn't render anything.
覆盖动作组件不会呈现任何内容。
Below is what I had using a different table library, but what I'm going for with Material-Table.下面是我使用不同的表格库的内容,但我打算使用 Material-Table。
Current Code当前代码
<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
/>
)
}}
/>
CustomMaterialTable自定义材料表
import MaterialTable from 'material-table'
import React from 'react'
export default function CustomMaterialTable (props) {
return (
<MaterialTable {...props} />
)
}
I think that what you are asking could be done by overriding the Action component as explained here,docs .我认为您所要求的可以通过覆盖 Action 组件来完成,如此处解释的docs 。
Following that I ended up with this:之后我得到了这个:
Of course you need to do some work on styling, but this could point you to the right direction.当然,您需要在样式方面做一些工作,但这可能会为您指明正确的方向。
Table definition, look at components and action props:表定义,看组件和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
}
]}
/>
I don't know exactly what you are looking for but I added the filtering option to the table.我不确切知道您在寻找什么,但我在表格中添加了过滤选项。 Maybe that could be a different way to filter out data without having to overwrite the component and having to fight against the buil-in styles.
也许这可能是一种过滤数据的不同方法,而不必覆盖组件并且不必与内置 styles 作斗争。
Hope this helps!希望这可以帮助! good luck
祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.