How to use the tubular-common.ColumnDataType.NUMERIC function in tubular-common

import {
  AggregateFunctions,
  ColumnDataType,
  ColumnModel,
  ColumnSortDirection
} from 'tubular-common';

const regularOrderIdCol = new ColumnModel('OrderID', {
  DataType: ColumnDataType.NUMERIC,
  Filterable: true,
  IsKey: true,
  SortDirection: ColumnSortDirection.ASCENDING,
  SortOrder: 1,
  Sortable: true
});

// Column samples
const validColumnsSample = [
  regularOrderIdCol,
  new ColumnModel('CustomerName', {
    Aggregate: AggregateFunctions.COUNT,
    Filterable: true,
    Searchable: true
  }),
  new ColumnModel('ShippedDate', {

});

// Column samples
const validColumnsSample = [
  regularOrderIdCol,
  new ColumnModel('CustomerName', {
    Aggregate: AggregateFunctions.COUNT,
    Filterable: true,
    Searchable: true
  }),
  new ColumnModel('ShippedDate', {
    DataType: ColumnDataType.DATE_TIME,
    Filterable: true
  }),
  new ColumnModel('ShipperCity'),
  new ColumnModel('Amount', { DataType: ColumnDataType.NUMERIC })
];

export { validColumnsSample };

const context = {
  actions: {
    exportTo: jest.fn(),
    setActiveColumn: jest.fn().mockReturnValue('CustomerName'),
    setInitialData: jest.fn(),
    sortColumn: jest.fn().mockReturnValue('OrderID'),
    updatePage: jest.fn(),
    updateSearchText: jest.fn().mockReturnValue('search'),
  },
  state: {
    activeColumn: null,
    aggregate: null as any,
    columns: [
      new ColumnModel('OrderID', {
        DataType: ColumnDataType.NUMERIC,
        Filterable: true,
        IsKey: true,
        Label: 'Order ID',
        SortDirection: ColumnSortDirection.ASCENDING,
        SortOrder: 1,
        Sortable: true,
      }),
      new ColumnModel('CustomerName', {
        Aggregate: AggregateFunctions.COUNT,
        Filterable: true,
        Searchable: true,
      }),
      new ColumnModel('ShippedDate', {
        DataType: ColumnDataType.DATE_TIME,
        Filterable: true,
      }),

Label: 'Order ID',
        SortDirection: ColumnSortDirection.ASCENDING,
        SortOrder: 1,
        Sortable: true,
      }),
      new ColumnModel('CustomerName', {
        Aggregate: AggregateFunctions.COUNT,
        Filterable: true,
        Searchable: true,
      }),
      new ColumnModel('ShippedDate', {
        DataType: ColumnDataType.DATE_TIME,
        Filterable: true,
      }),
      new ColumnModel('ShipperCity'),
      new ColumnModel('Amount', { DataType: ColumnDataType.NUMERIC }),
    ],
    data: [
      [1, 'Microsoft', '2016-03-19T19:00:00', 'Guadalajara, JAL, Mexico', 300],
      [2, 'Microsoft', '2016-04-23T10:00:00', 'Guadalajara, JAL, Mexico', 0],
      [3, 'Microsoft', '2016-12-22T08:00:00', 'Guadalajara, JAL, Mexico', 300],
      [4, 'Unosquare LLC', '2016-02-01T18:00:00', 'Los Angeles, CA, USA', 0],
      [5, 'Microsoft', '2016-11-10T18:00:00', 'Guadalajara, JAL, Mexico', 92],
      [6, 'Unosquare LLC', '2016-11-06T18:00:00', 'Los Angeles, CA, USA', 18],
      [7, 'Unosquare LLC', '2016-11-11T18:00:00', 'Leon, GTO, Mexico', 50],
      [8, 'Unosquare LLC', '2016-11-08T18:00:00', 'Portland, OR, USA', 9],
      [9, 'Vesta', '2016-11-07T18:00:00', 'Guadalajara, JAL, Mexico', 108],
      [10, 'Unosquare LLC', '2016-11-05T18:00:00', 'Portland, OR, USA', 15],
    ],
    filteredRecordCount: 10,
    isLoading: false,
    itemsPerPage: 10,

Sortable: true,
  }),
  new ColumnModel('CustomerName', {
    Aggregate: AggregateFunctions.COUNT,
    Filterable: true,
    Searchable: true,
    Sortable: true,
  }),
  new ColumnModel('ShippedDate', {
    DataType: ColumnDataType.DATE_TIME,
    Filterable: true,
    Sortable: true,
  }),
  new ColumnModel('ShipperCity'),
  new ColumnModel('Amount', {
    DataType: ColumnDataType.NUMERIC,
    Sortable: true,
  }),
  new ColumnModel('IsShipped', {
    DataType: ColumnDataType.BOOLEAN,
    Filterable: true,
    Sortable: true,
  }),
];
export default columns;

import {
  AggregateFunctions,
  ColumnDataType,
  ColumnModel,
  ColumnSortDirection,
} from 'tubular-common';

const columns = [
  new ColumnModel('OrderID', {
    DataType: ColumnDataType.NUMERIC,
    Filterable: true,
    IsKey: true,
    Label: 'Id',
    SortDirection: ColumnSortDirection.ASCENDING,
    SortOrder: 1,
    Sortable: true,
  }),
  new ColumnModel('CustomerName', {
    Aggregate: AggregateFunctions.COUNT,
    Filterable: true,
    Searchable: true,
    Sortable: true,
  }),
  new ColumnModel('ShippedDate', {
    DataType: ColumnDataType.DATE_TIME,
    Filterable: true,

ColumnModel,
} from 'tubular-common';

const columns = [
  new ColumnModel('OrderID', {
    DataType: ColumnDataType.NUMERIC,
    IsKey: true,
    Label: 'Id',
  }),
  new ColumnModel('CustomerName'),
  new ColumnModel('ShippedDate', {
    DataType: ColumnDataType.DATE_TIME,
  }),
  new ColumnModel('ShipperCity'),
  new ColumnModel('Amount', {
    DataType: ColumnDataType.NUMERIC,
  }),
  new ColumnModel('IsShipped', {
    DataType: ColumnDataType.BOOLEAN,
  }),
];
export default columns;

import {
  ColumnDataType,
  ColumnModel,
} from 'tubular-common';

const columns = [
  new ColumnModel('OrderID', {
    DataType: ColumnDataType.NUMERIC,
    IsKey: true,
    Label: 'Id',
  }),
  new ColumnModel('CustomerName'),
  new ColumnModel('ShippedDate', {
    DataType: ColumnDataType.DATE_TIME,
  }),
  new ColumnModel('ShipperCity'),
  new ColumnModel('Amount', {
    DataType: ColumnDataType.NUMERIC,
  }),
  new ColumnModel('IsShipped', {
    DataType: ColumnDataType.BOOLEAN,
  }),
];
export default columns;

export const renderCellContent: any = (column: ColumnModel, row: any) => {
    switch (column.DataType) {
        case ColumnDataType.NUMERIC:
            return row[column.Name] || 0;
        case ColumnDataType.DATE:
            return formatDate(row[column.Name]);
        case ColumnDataType.DATE_TIME:
        case ColumnDataType.DATE_TIME_UTC:
            return formatDate(row[column.Name], 'M/d/yyyy h:mm a');
        case ColumnDataType.BOOLEAN:
            return row[column.Name] === true ?  : ;
        default:
            return row[column.Name];
    }
};