react-bootstrap-table2を使ってみた。

 <BootstrapTable keyField={'artist songTitle'}
            data={ results.data.maxResultList } 
            columns={ columns }
            rowEvents={rowEvents}
            pagination={ paginationFactory()}/>

jsonに対応するdataFieldを指定する

const columns=[
  {
      dataField: 'date',
      text: '日付',
      classes:'',
      sort:true,
      formatter: dateFormatter,
  },
...
]

keyFieldにはプロパティを２つ以上指定できる

1つのkeyFieldで値が一意にならなかったので、
カンマ区切りで2つ指定しようとしたら失敗。
スペースを空けてプロパティ名を２つ指定するらしい。

onRowClickはrowEventに統合された

rowEventの中でonClick(event, row, rowIndex)という関数が用意されているようです。

const rowEvents={
    onClick:(e,row,rowIndex)=>{
        console.log(row);

    }
}

formatter

ミリ秒から日付を表示するformatter。

const dateFormatter=(cell,row)=>{
    var date=new Date();
    date.setTime(cell);
    return (
    <span>
      {date.toLocaleDateString()}
    </span>)
}

classesにもfunctionが使える

{
      dataField: 'score',
      text: '得点',
      classes:judgePointStyle,
      sort:true,
  },

const judgePointStyle=(cell,row)=>{
    var cssName;
        if(cell===100){
            cssName='';
        }else if(cell>=99){
            cssName='total_over99'
        }else if(cell>=98 && cell<99){
            cssName='total_over98'
        }else if(cell>=95 && cell<98){
            cssName='total_over95'
        }else if(cell>=90 && cell<95){
            cssName='total_over90'
        }else if(cell>=85 && cell<90){
            cssName='total_over85'
        }else if(cell>=80 && cell<85){
            cssName='total_over80'
        }
        return cssName;
}