Column header left image

Bug: it does not work

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

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

CSS

.currency {
  display: inline-block !important;
  width: 19px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%3B%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M12.389%202.079a1%201%200%200%201%20.446.404A.967.967%200%200%201%2013%203v1c0%20.55-.45%201-1%201s-.95-1-1.5-1a.504.504%200%200%201-.5-.504v-.99c0-.291.226-.505.505-.505H12c.137%200%20.268.029.389.079zM10%208.707V7.642c0-.28.204-.412.456-.303%200%200%202.544.87%202.544%203.217%200%202.359-2.531%203.145-2.531%203.145-.253.11-.469-.038-.469-.32v-1c0-.293.182-.634.407-.789%200%200%20.593-.245.593-1.036%200-.761-.593-1.046-.593-1.046-.214-.172-.407-.526-.407-.802zM8%201c.556%200%201%20.444%201%20.99V14c0%20.547-.448%201-1%201-.556%200-1-.448-1-1H4a.997.997%200%200%201-.706-.294A.993.993%200%200%201%203%2013v-1c0-.55.45-1%201-1s1%201%202%201h1V9s-.427-.005-1-.128C4.815%208.617%203%207.845%203%205.5c0-2.36%201.815-3.126%203-3.377C6.573%202.003%207%202%207%202v-.003C7%201.453%207.448%201%208%201zM5%205.5c0%20.76.5%201.135%201%201.32.5.185.999.18%201%20.18V4c-.001%200-.5-.02-1%20.156-.5.177-1%20.552-1%201.344z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  position: absolute;
  left: 1px;
  top: 7px;
}

.text {
  display: inline-block !important;
  width: 19px;
  height: 16px;
  background-image:...

JavaScript

document.addEventListener("DOMContentLoaded", () => {

  new FancyGrid({
    renderTo: 'container',
    theme: 'extra-gray',
    selModel: 'rows',
    trackOver: true,
    filter: true,
    data: data,
    width: 900,
    height: 500,
    defaults: {
      resizable: true,
      sortable: true,
      draggable: true,
      align: 'left',
      menu: true
    },
    columns: [{
      type: 'string',
      width: 120,
      headerLImageCls: 'text',
      title: 'Name',
      cellAlign: 'left',
      index: 'name',
      render(o) {
        o.value = `${o.data.name} ${o.data.surname}`;

        return o;
      }
    }, {
      type: 'string',
      width: 120,
      headerLImageCls: 'text',
      title: 'Position',
      cellAlign: 'left',
      index: 'position'
    }, {
      type: 'currency',
      headerLImageCls: 'currency',
      precision: 2,
      editable: true,
      title: 'Salary',
      cellAlign: 'right',
      index: 'salary'
    }, {
      type: 'string',
      headerLImageCls: 'phone',
      cellAlign: 'right',
      sortable: false,
      title: 'Phone',
      index: 'phone'
    }, {
      type: 'date',
      headerLImageCls: 'date',
      cellAlign: 'right',
      title: 'Birthday',
      index: 'birthday'
    }, {
      type: 'string',
      width: 200,
      headerLImageCls: 'email',
      sortable: false,
      cellAlign: 'left',
      title: 'Email',
      index: 'email'
    }]
  });
});

var data = [{
  "position": "CEO",
  "name": "Nick",
  "surname": "Thomson",
  "salary": 10000,
  "phone": "858-490-5000",
  "birthday": "1961.10.01",
  "email": "Nick.Thomson@kia-canada.com"
}, {
  "position": "Deputy Director",
  "name": "Grace",
  "surname": "Thomson",
  "salary": 9000,
  "phone": "858-490-2000",
  "birthday": "1980.07.21",
  "email": "Grace.Thomson@kia-canada.com"
}, {
  "position": "Sales Director",
  "name": "Peter",
  "surname": "West",
  "salary": 7000,
  "phone": "858-490-5001",
  "birthday": "1965.01.05",
  "email":...