Cell Attributes

Add custom attributes to each cell (and header cell) of your table using the attributes config. This example adds data-field="name" to all cells of the "Name" column:

Live Editor

const grid = new Grid({ columns: [ { name: 'Name', attributes: { 'data-field': 'name' } }, 'Email', ], data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]) });

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        attributes: {
          'data-field':  'name'
        }
      },
      'Email',
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});

Result

Loading...

tip

attributes config accepts callback function as well:

{
    'attributes': (cell, row, column) => { ... }
}

Note: cell and row arguments are empty when the attributes function is called for a th (header cell)

danger

Be careful when you're using the attributes config. The output of attributes function can override the default Grid.js HTML attributes (e.g. you can override the default Grid.js className attribute)

Live Editor

const grid = new Grid({ columns: [ { name: 'Name', attributes: (cell) => { // add these attributes to the td elements only if (cell) { return { 'data-cell-content': cell, 'onclick': () => alert(cell), 'style': 'cursor: pointer', }; } } }, 'Email', ], data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]) });

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        attributes: (cell) => {
          // add these attributes to the td elements only
          if (cell) { 
            return {
              'data-cell-content': cell,
              'onclick': () => alert(cell),
              'style': 'cursor: pointer',
            };
          }
        }
      },
      'Email',
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});

Result

Loading...