vincjo / datatables

A toolkit for creating datatable components with Svelte
https://vincjo.fr/datatables
MIT License
372 stars 15 forks source link

new datahandler with json object as key and embedded json arrays #4

Closed mapl closed 1 year ago

mapl commented 1 year ago

Can we build a simple datatable from the json object below (with only some parts like "purchases") ?

As for now, it seems that the datahandler only accepts json arrays but not json objects.

const handler = new DataHandler(someData, { rowsPerPage: 50 })

// json example taken from https://www.customer.io/docs/json-in-segments/

someData = {
  "last_shopped": 1662587234,
  "location": {"city": "Montreal","province": "QC"},
  "purchases": [
    {
      "id": 123,
      "type": "computers",
      "name": "Monitor",
      "price": 25,
      "discount": 10,
      "shipping_address": {"city": "Calgary","province": "AB"},
      "coupons_applied": [
        {
          "coupon_code": "AXXXXX",
          "discount": "10%"
        },
        {
          "coupon_code": "BXXXXX",
          "discount": "15%"
        }
      ]
    },
    {
      "id": 456,
      "type": "computers",
      "name": "Mouse",
      "price": 15,
      "shipping_address": {"city": "Edmonton","province": "AB"}
    }
  ],
  "stores_visited": ["Winnipeg","Toronto","Vancouver"],
  "coupons_received": [5,10,20],
  "children_ages": [1654099180,1654099181,1654099182],
  "lottery_tickets":
     [
        [1,3,5,7,9],
        [1,2,3,5,8]
  ]
}
vincjo commented 1 year ago

Indeed, the data must be iterable to be used in the table.

In this case, we can use the nested array in the object

<script>
    const handler = new DataHandler( someData.purchases, { rowsPerPage: 50 } )
</script>