对行进行多条件筛选并应用颜色 React Table

Question

我正在使用 react-table 来显示数据。因为我想在 table 行和颜色上使用多个条件，如下所示：

const WORK_ORDER_COLUMNS = [{
    Header: 'ID',
    accessor: 'id',
    width: 50
  }, {
    Header: 'Product',
    accessor: 'product',
    width: 150
  } , {
    id: 'Stage Progress',
    Header: 'Stage Progress',
    accessor: (data : any) => { 

      return (data.stage_due_date !== null 
            ?(data.stage_due_date > moment(new Date()).format('DD/MM/yyyy') ? "On time"
            :data.stage_due_date < moment(new Date()).format('DD/MM/yyyy') ? "Over Due" 
            :data.stage_due_date = moment(new Date()).format('DD/MM/yyyy') ? "Due Today"
            :data.stage_due_date ):
       "Not Access")
    
    }
]

因为我想在 stage_due_date 列上应用条件。我也想用不同的颜色突出它们。

Answer 1

通过在<div>中制作结果数据，我们可以将CSS添加到其中。

accessor: (data : any) => { 

      return (data.stage_due_date !== null 
            ?(data.stage_due_date > moment(new Date()).format('DD/MM/yyyy') ? <div className="OnTime">On Time </div>
            :data.stage_due_date < moment(new Date()).format('DD/MM/yyyy') ? <div className="Overdue">Over Due </div> 
            :data.stage_due_date = moment(new Date()).format('DD/MM/yyyy') ? <div className="DueToday">Due Today </div>
            :data.stage_due_date ):
       "Not Access")

对行进行多条件筛选并应用颜色 React Table

Mulitple condition filter on row and apply color React Table

reactjs

react-table