Добавление раскрывающегося списка к действиям таблицы материалов - PullRequest
Новая
       19

Добавление раскрывающегося списка к действиям таблицы материалов

0 голосов
/ 08 июля 2020

Кажется, я не могу понять, как разместить настраиваемый раскрывающийся компонент в разделе «Действие» в верхней правой части таблицы материалов. Переопределение компонента действия ничего не отображает.

Ниже показано то, что я использовал с другой библиотекой таблиц, но то, что я собираюсь использовать с 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
      />
    )
  }}
/>

CustomMaterialTable 

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

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

1 Ответ

0 голосов
/ 09 июля 2020

Я думаю, что то, что вы просите, можно сделать, переопределив компонент Action, как описано здесь, docs .

После этого я получил следующее:

enter image description here

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:

 (

Sandbox здесь .

Я не знаю точно, что вы ищете, но я добавил в таблицу параметр фильтрации. Возможно, это может быть другой способ отфильтровать данные без необходимости перезаписывать компонент и бороться со встроенными стилями.

Надеюсь, это поможет! удачи

...