Grid Webinar 19.11.25

by stitot

HTML

<script src="http://localhost:3030/code/highcharts.js"></script>
<script src="http://localhost:3030/code/highcharts-3d.js"></script>
<script src="http://localhost:3030/code/grid/grid-pro.js"></script>

<div id="container"></div>

<div id="buttons">
  <button id="exportGrid">Export Grid</button>
</div>

<textarea id="export"></textarea>

CSS

@import url("http://localhost:3030/code/grid/css/grid-pro.css");

.my-theme {
  --hcg-header-font-weight: 500;
  --hcg-button-border-color:#ececec;
  --hcg-button-border-width: 1px;
  --hcg-padding: 5px;

  .red {
    color: red;
  }

  .green {
    color: green;
  }

  tr:has(td[data-column-id="stock"][data-value="false"]) td {
    color: red;
  }
}















.sparkline-editor-editing-container {
    opacity: 0.5;
}

.sparkline-editor-editing-container::before {
    content: "Editing...";
}

.popup-footer {
    padding-top: 4px;
    margin-top: 4px;
}

.popup-footer .hcg-button {
    margin-right: 4px;
    display: block;
}

.sparkline-editor-popup-item {
    margin: 4px 0;
}

.sparkline-editor-popup-item .hcg-input {
    margin-right: 4px;
    width: auto;
}













textarea#export {
  width: 100%;
  height: 200px;
  border: none;
  line-height: 1.5em;
  margin-top: 10px;
  background-color: transparent;
}

textarea:focus-visible {
  outline: none;
}

JavaScript

const data = {
  uid: [1, 2, 3, 4, 5, 6, 7],
  stock: [true, false, true, false, true, true, true],
  name: ['Phone', 'Bread', 'Shirt', 'Laptop', 'Milk', 'Jeans', 'Tablet'],
  sku: [
    'ELE-001',
    'FOO-123',
    'CLO-456',
    'ELE-002',
    'FOO-456',
    'CLO-789',
    'ELE-003',
  ],
  category: [
    'Electronics',
    'Food',
    'Clothing',
    'Electronics',
    'Food',
    'Clothing',
    'Electronics',
  ],
  price: [699.99, 10.5, 29.99, 1199.99, 12, 49.99, 500],
  discount: [20, 0, 40, 0, 0, 15, 30],
  trend: [
    [20,12,9,10],
    [10,12,20,10],
    [9,12,13,14],
    [20,12,9,10],
    [10,12,20,10],
    [9,12,13,14],
    [8,13,10,20],
  ],
};


myGrid = Grid.grid('container', {
  dataTable: {
    columns: data,
  },
  columnDefaults: {
    filtering: {
      enabled: true,
    },
    cells: {
      editMode: {
        enabled: true,
      },
    },
  },
  header: [
    { columnId: 'stock', format: 'In stock' },
    {
      format: 'Product details',
      className: 'hcg-center',
      columns: [
        { columnId: 'sku', format: 'SKU' },
        { columnId: 'name', format: 'Name' },
        { columnId: 'category', format: 'Category' },
      ],
    },
    {
      format: 'Pricing and Sales',
      className: 'hcg-center',
      columns: [
        { columnId: 'price', format: 'Price' },
        { columnId: 'discount', format: 'Discount' },
        { columnId: 'trend', format: 'Sales trend' },
      ],
    },
    { columnId: 'uid', format: '' },
  ],
  columns: [
    {
      id: 'uid',
      width: 90,
      className: 'hcg-center',
      cells: {
        format: '<button class="hcg-button">Delete</button>',
        events: {
          afterRender: function () {
            const cell = this;
            cell.htmlElement
              .querySelector('button')
              ?.addEventListener('click', function () {
               ...