Create a dynamic data table with customizable columns using Grid library.

by stitot

HTML

<table>
  <caption>Example 1</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>col2</th>
      <th>col3</th>
    </tr>
  </thead>
</table>

<table>
  <caption>Example 2</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>col2</th>
      <th>col3</th>
    </tr>
  </thead>
</table>

CSS

table, td, th {
  border: 1px solid;
  padding: 10px;
}

table {
  border-collapse: collapse;
  margin-bottom: 20px;
}

JavaScript

// Example 1: Data as object of key/values[], as today
const gridConfig = {
  dataSources: {
    columns: {
      data: {
        col1: ['1,1', '1,2', '1,3'],
        col2: ['2,1', '2,2', '2,3'],
        col3: ['3,1', '3,2', '3,3'],
      },
    },
  },
  columns: [
    {
      id: 'col1',
      header: {
        format: 'Column 1',
      },
    },
  ],
}

// Example 2: Data as array of arrays, the new row model
const gridConfig = {
  dataSources: {
    rows: {
      data: [
        ['col1', 'col2', 'col3'],
        ['1,1', '2,1', '3,1'],
        ['1,2', '2,2', '3,2'],
        ['1,3', '2,3', '3,3']
      ],
      headers: true,
    },
  },
  columns: [
    {
      id: 'col1',
      header: {
        format: 'Column 1',
      },
    },
  ],
}