[英]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.