Reactjs 将下拉组件添加到材质表操作

我似乎不知道如何在material表右上角的Action部分中放置自定义下拉组件。重写动作组件不会呈现任何内容

下面是我使用不同的表格库得到的，但我要使用的是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} />
  )
}

{csvDownload（数据，buildFileName（stateName））}，
pageSize:tableData.length
}}
组成部分={{
容器：props=>props.children，
动作：道具=>(
)
}}
/>

可定制材料

<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} />
  )
}

从“物料表”导入物料表
从“React”导入React
导出默认功能CustomMaterialTable（道具）{
返回(
)
}

我认为您所要求的可以通过覆盖此处解释的操作组件来完成

接下来，我得出了以下结论：

当然，您需要在样式方面做一些工作，但这可以为您指明正确的方向

表格定义，查看组件和动作道具：

<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
          }
        ]}
      />

(
)
}}
行动={[
{
onClick：（event，rowData）=>alert（“某物”），
isFreeAction:对
}
]}
/>

沙箱

我不知道你到底在找什么，但我在表中添加了过滤选项。也许这是一种过滤数据的不同方式，而不必覆盖组件和对抗内置样式

---

希望这有帮助！祝你好运

谢谢！这有助于推动我前进，我可以显示我需要的自定义字段。但是，当我将新自定义字段与

exportButton:false

组合时，导出按钮与新自定义字段重叠。“搜索”字段工作正常，但“导出”按钮工作不正常。在不添加我自己的自定义导出功能的情况下，是否可以解决此问题？我想保留内置的

导出为pdf

功能，而不必构建自己的功能。我可以通过添加

边距：“10px 10px 10px 2px”，显示：“inline flex”

，让它看起来不错。但我很好奇是否有更好的方法来做到这一点。。。此外，有没有办法重新排列动作按钮？很高兴这对你有用！我不知道从现在起该怎么办。因为最初的问题已经基本解决了，也许你可以创建一个新的更具体的关于行动重新排序问题的问题。也许这会引起人们对这一特定主题的更多关注。祝你好运我的想法完全正确。非常感谢您的帮助@NicoE