使用 react-table 对同一行中的不同数据对象进行排序

Question

我真的不确定如何描述我正在尝试做的事情。我正在尝试创建一个 react-table 组件，其中我的数据以某种方式组织。

假设我有一个这样的对象列表：

{ id: '887SYEP',
    client: 'CS',
    side: 'S',
    price: 85.8125,
    qty: 9866000,
    id: '8a59875bdaca5f886c5e7bdc42bb753b78cbe59d' }

请看附图。如果 "side" 道具是 "B" 那么价格和相关数据就是出价数据，如果它的 "S" 那么它的报价数据。每个对象都是一个股票报价。但是我想以这样的方式订购它，使 table 看起来像这样，其中最高出价和报价位于顶部：

image of ideal table

尽管它有两个独立的引用对象，但此数据排在一行中。如果其 "side" 属性类型为 "S"，则对应的 "client" 和 "price" 位于左侧；如果其 "B" (buy/sell 边）。有没有办法使用一个 table 来实现这个或者我需要两个？买入价和卖出价仅在相同股票和用户查看每种股票最高价的方式上相关。

Answer 1

首先你应该过滤买家和卖家

let buyers = orders.filter(obj => obj.side === "B")
let sellers = orders.filter(obj => obj.side === "S")

然后按价格排序

buyers.sort((a,b) => a.price < b.price)
sellers.sort((a,b) => a.price > b.price)

为简单起见，假设两个数组的长度相同。将它们结合起来：

let orders = []
for (let index in buyers) {
    let {client: BClient, qty: BQty, price: Bid} = buyers[index]
    let {client: SClient, qty: SQty, price: Offer} = sellers[index] 
    orders.push({
        BClient,
        BQty,
        Bid,
        Offer,
        SQty,
        SClient
    })
}

然后显示orders

使用 react-table 对同一行中的不同数据对象进行排序

sort different data obejcts in same row with react-table

react-table