Reactjs Materials UI Datatable-在数据集中使用图标和额外数据，但不以排序为代价

这就是我想使用Materials 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}}
/>

const列=[
{
名称：“成本”，
标签：“成本”，
选项：{
过滤器：对，
customBodyRender：（值、tableMeta、updateValue）=>{
返回(
value.icon+“”+value.price+”（“+value.keyword+”）”
);
}
}
}
];
常数数据=[
{成本：{图标：“上涨”，价格：10，关键字：“二手车”}，
{成本：{图标：“下跌”，价格：14，关键字：“新车”}
]

---

实现这一目标的正确方法是什么？我正在使用ReactJS和mui datatables库

我使用

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

  }}
/>

{
返回数据。排序（（a，b）=>{
如果（colIndex==1）{
返回（a.data[colIndex]。价格