ReactJS - 是否可以防止/排除列被排序？

Question

我是 ReactJS 的新手，目前正在创建一个使用我从这里获得的数据表库的项目：
react-data-table-component

我要做的是在单击其他列进行排序时排除或防止第一列被重新排列/重新排序。

这是我当前的数据表：

我试图实现这一点，以防止重新排序行号或索引号，因此无论列已排序，第一列将按升序排列（从 1 到 n）。

如果这是不可能的，那么无论哪一列（排名列除外）已被排序，我可以采取什么其他方法使排名列始终按 ASCENDING 顺序排列？

这是我的整个组件代码：

import React, {useEffect, useState} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import DataTable from 'react-data-table-component';

const CountryTable = ({items}) => {
    
var x=0;
for(var i=0; i<items.length; i++){
    items[i].index = i;
}

console.log(items);

return(
    <DataTable
        title="Covid-19 Stats"
        defaultSortAsc="false"
        responsive
        defaultSortField="cases"
        defaultSortAsc={false}
        striped
        highlightOnHover
        columns={
            [
                {
                    name: '#',
                    selector: 'index',
                    disableSortBy: true,
                },
                {
                    name: 'Country',
                    selector: 'country',
                    sortable: true,
                },
                {
                    name: 'Total Cases',
                    selector: 'cases',
                    sortable: true,
                },
                {
                    name: 'Additional New Cases',
                    selector: 'todayCases',
                    sortable: true,
                },
                {
                    name: 'Current Active Cases',
                    selector: 'active',
                    sortable: true,
                },
                {
                    name: 'Total Deaths',
                    selector: 'deaths',
                    sortable: true,
                },
                {
                    name: 'Additional New Deaths',
                    selector: 'todayDeaths',
                    sortable: true,
                },
                {
                    name: 'Total Recoveries',
                    selector: 'recovered',
                    sortable: true,
                },
                {
                    name: 'Additional New Recoveries',
                    selector: 'todayRecovered',
                    sortable: true,
                },
            ]
        }
        keyField={items.index}
        data={items}
    />  
);
}

export default CountryTable;

Answer 1

您可以使用selector 属性来提供要呈现的自定义值。在这种情况下，可以使用index（您可能需要index+1）。

import React, {useEffect, useState} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import DataTable from 'react-data-table-component';

const CountryTable = ({items}) => {
    
var x=0;
for(var i=0; i<items.length; i++){
    items[i].index = i;
}

console.log(items);

return(
    <DataTable
        title="Covid-19 Stats"
        defaultSortAsc="false"
        responsive
        defaultSortField="cases"
        defaultSortAsc={false}
        striped
        highlightOnHover
        columns={
            [
                {
                    name: '#',
                    selector: (row, index) => index,
                    sortable: false,
                },
                {
                    name: 'Country',
                    selector: 'country',
                    sortable: true,
                },
                {
                    name: 'Total Cases',
                    selector: 'cases',
                    sortable: true,
                },
                {
                    name: 'Additional New Cases',
                    selector: 'todayCases',
                    sortable: true,
                },
                {
                    name: 'Current Active Cases',
                    selector: 'active',
                    sortable: true,
                },
                {
                    name: 'Total Deaths',
                    selector: 'deaths',
                    sortable: true,
                },
                {
                    name: 'Additional New Deaths',
                    selector: 'todayDeaths',
                    sortable: true,
                },
                {
                    name: 'Total Recoveries',
                    selector: 'recovered',
                    sortable: true,
                },
                {
                    name: 'Additional New Recoveries',
                    selector: 'todayRecovered',
                    sortable: true,
                },
            ]
        }
        keyField={items.index}
        data={items}
    />  
);
}

export default CountryTable;