Материалы UI Datatable - Использование значков и дополнительных данных в наборе данных, но не за счет сортировки - PullRequest
Новая
       13

Материалы UI Datatable - Использование значков и дополнительных данных в наборе данных, но не за счет сортировки

0 голосов
/ 24 сентября 2019

Это то, чего я хочу достичь, используя материалы UI Datatables.В ячейке должна быть иконка для обозначения увеличения или уменьшения стоимости.Кроме того, значок должен быть красного или зеленого цвета вместе с ключевым словом, которое вызвало увеличение или уменьшение. 

+-------------------+ 
|  Cost             | 
+-------------------+ 
|  ▲ $10 (used-cars)| 
+-------------------+ 
|  ▼ $14 (new-cars) | 
+-------------------+

Я могу использовать следующий код MUI.Кажется, это работает, но столбец больше не сортируется. 

const columns = [
  {
    name: "cost",
    label: "Cost",
    options: {
      filter: true,
      customBodyRender: (value, tableMeta, updateValue) => {
        return (
          value.icon + ' ' + value.price + '('+ value.keyword + ')'
        );
      }
    }
  }
];

const data = [
  { cost: {icon: 'up', price: 10, keyword: 'used-cars' } },
  { cost: {icon: 'down', price: 14, keyword: 'new-cars' } }
]

<MUIDataTable
  title={"Cost List"}
  data={data}
  columns={columns}
  options={{filters: true}}
/>

Что может быть правильным способом для достижения этой цели?Я использую ReactJS и библиотеку mui-datatables

1 Ответ

0 голосов
/ 24 сентября 2019

Я решил, используя customSort.Вот как: 

<MUIDataTable
  title={"Cost List"}
  data={data}
  columns={columns}
  options={{
    filters: true, 
    customSort: (data, colIndex, order) => {  
      return data.sort((a, b) => { 
        if(colIndex === 1) {
          return (a.data[colIndex].price < b.data[colIndex].price ? -1: 1 ) * (order === 'desc' ? 1 : -1);
        } 
        return (a.data[colIndex] < b.data[colIndex] ? -1: 1 ) * (order === 'desc' ? 1 : -1);
      });
    }

  }}
/>
...