ReactJS

Question

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

我想做的是排除或防止第一列被re-arranged/re-sorted当其他列被点击排序时。

这是我当前的数据 Table:

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

如果这不可能，那么我可以采取什么其他方法使排名列始终按升序排列，而不管对哪一列（排名列除外）进行排序？

这是我的组件的完整代码：

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;

ReactJS - 是否可以 prevent/exclude 对列进行排序？

ReactJS - Is it possible to prevent/exclude a column from being sorted?

datatable

frontend

jsx

npm