JSON

In order to import JSON (or an array of objects), simply change the data input to [{ key: value }, ... ]. Grid.js expects each column to have a unique id field which matches the keys in the data object:

Live Editor

const grid = new Grid({ columns: [{ id: 'name', name: 'Name' }, { id: 'email', name: 'Email' }, { id: 'phoneNumber', name: 'Phone Number' }], data: [ { name: 'John', email: 'john@example.com', phoneNumber: '(353) 01 222 3333' }, { name: 'Mark', email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' }, ] });

const grid = new Grid({
  columns: [{
     id: 'name',
     name: 'Name'
  }, {
     id: 'email',
     name: 'Email'
  }, {
     id: 'phoneNumber',
     name: 'Phone Number'
  }],
  data: [
    { name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },
    { name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },
  ]
});

Result

Loading...

tip

Grid.js tries to guess the id of columns by camelCasing them if column ID is not defined.

E.g. Phone Number becomes phoneNumber

Live Editor

const grid = new Grid({ columns: ['Name', 'Email', 'Phone Number'], data: [ { name: 'John', email: 'john@example.com', phoneNumber: '(353) 01 222 3333' }, { name: 'Mark', email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' }, ] });

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    { name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },
    { name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },
  ]
});

Result

Loading...

You can also leave the columns config empty if you want Grid.js to set the column names automatically:

Live Editor

const grid = new Grid({ data: [ { name: 'John', email: 'john@example.com', phoneNumber: '(353) 01 222 3333' }, { name: 'Mark', email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' }, ] });

const grid = new Grid({
  data: [
    { name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },
    { name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },
  ]
});

Result

Loading...

id field accepts a function as well. If you have a complex JSON object, pass a function to id and try to refine and format your data:

Live Editor

const grid = new Grid({ columns: [{ data: (row) => row.name.first, name: 'First Name' }, { data: (row) => row.name.last, name: 'Last Name' }, { id: 'email', name: 'Email' }, { id: 'phoneNumber', name: 'Phone Number' }], data: [{ name: { first: 'John', last: 'Murphy' }, email: 'john@example.com', phoneNumber: '(353) 01 222 3333' }, { name: { first: 'Mark', last: 'Wiens' }, email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' }, ] });

const grid = new Grid({
  columns: [{
    data: (row) => row.name.first,
    name: 'First Name'
  }, {
    data: (row) => row.name.last,
    name: 'Last Name'
  }, {
    id: 'email',
    name: 'Email'
  }, {
    id: 'phoneNumber',
    name: 'Phone Number'
  }],
  data: [{
      name: {
        first: 'John',
        last: 'Murphy'
      },
      email: '[email protected]',
      phoneNumber: '(353) 01 222 3333'
    },
    {
      name: {
        first: 'Mark',
        last: 'Wiens'
      },
      email: '[email protected]',
      phoneNumber: '(01) 22 888 4444'
    },
  ]
});

Result

Loading...