将下拉组件添加到 Material-Table 操作

Question

我似乎无法弄清楚如何在 material-table 右上角的操作部分中放置自定义下拉组件。覆盖操作组件不会呈现任何内容。

下面是我使用不同的 table 库的结果，但我要使用 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
      />
    )
  }}
/>

自定义MaterialTable

import MaterialTable from 'material-table'
import React from 'react'

export default function CustomMaterialTable (props) {
  return (
    <MaterialTable {...props} />
  )
}

Answer 1

我认为您所要求的可以通过覆盖此处解释的 Action 组件来完成，docs。

之后我得到了这个：

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

Table定义，看components和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
          }
        ]}
      />

沙盒 here.

我不知道你在找什么，但我在 table 中添加了过滤选项。也许这可能是一种不同的过滤数据的方式，而不必覆盖组件并且不必与内置样式作斗争。

希望对您有所帮助！祝你好运

将下拉组件添加到 Material-Table 操作

Add Dropdown Component to Material-Table Actions

reactjs

material-table