The table-grid from giorgi-ghviniashvili

table-grid's Introduction

Lightweight table grid component


Default	Dark

Features:

responsive
highly configurable
dynamic columns with icons
sortable and filterable
column categories
different themes
only one dependency - d3.js v7
color coded cells
pagination

Initialize

const table = Table({
  data,
  headers,
  container: "#table",
}).render();

Header format:

const headers = [
  {
    id: 0,
    isMainColumn: true,
    name: "City",
    icon: null,
    propName: "City",
    sort: false, // disable sort
    cellTemplate: (d) => {
      return `${d.City}`;
    },
    headerTemplate: () => {
      return new Promise((res) => {
        res(`<div class="table-icon">
          <div class="arrow">
            ${arrow}
          </div>
          <div class="location-txt">
            Location
          </div>
        </div>`)
      })
    },
  },
  {
    id: 1,
    name: "Column A",
    icon: "icon url here",
    propName: "column_a",
    rankProp: "column_a",
    sort: sortFunc,
    class: "", // apply additional class
    cellTemplate: () => {
      return `<h1>Any html content here</h1>`
    },
    headerTemplate: () => {
      return new Promise((res) => {
        res(`<div class="table-icon">
          <div class="arrow">
            ${arrow}
          </div>
          <div class="square-icon">
            <div class="icon">[icon svg as text]</div>
          </div>
          <div class="header-text">
            ${name}
          </div>
        </div>`)
      })
    },
    order: "asc", // default order
    colorScale: (colorDomain) => d3.scaleQuantile(colorDomain, colors),
    category: "category a"
  }
]

Recommend Projects