Skip to content

unosquare/tubular-common

Repository files navigation

Quality Gate Status npm version

Tubular Common

Tubular Common provides TypeScript and Javascript models and data transformer to use any Tubular DataGrid component with an array of Javascript objects.

Please visit the Tubular GitHub Page to learn how quickly you can start coding. See Related projects below to discover more Tubular libraries and backend solutions.

Installation

$ npm install tubular-common --save

Usage

Transformer

The Transformer will resolve a Tubular Grid Request model and a dataset (array of objects) into a Tubulr Grid Response model. When using with another Tubular library (like Tubular React) the UI component should create the request object to transform a dataset in a response object ready to use in your UI.

The following code is a sample how use the request and response objects to tranform data:

import Transformer from 'tubular-common';

const request = new GridRequest(
    [
        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.None,
            searchable: true,
            sortable: false,
        }),
        new ColumnModel('ShippedDate', {
            dataType: ColumnDataType.DateTime,
            dilterable: true,
            sortable: false,
        }),
        new ColumnModel('ShipperCity'),
        new ColumnModel('Amount', {
            dataType: ColumnDataType.Numeric,
            sortable: false,
        }),
    ],
    10,
    0,
    '',
);

export const data = [
    {
        OrderID: 1,
        CustomerName: 'Microsoft',
        ShippedDate: '2016-03-19T19:00:00',
        ShipperCity: 'Guadalajara, JAL, Mexico',
        Amount: 300.0,
    },
    {
        OrderID: 2,
        CustomerName: 'Microsoft',
        ShippedDate: '2016-11-08T18:00:00',
        ShipperCity: 'Los Angeles, CA, USA',
        Amount: 9.0,
    },
    /// ...
];

const response = Transformer.getResponse(request, data);
console.log(data);

The output is the following Javascript object:

{
  aggregationPayload: { },
  counter: 0,
  currentPage: 1,
  filteredRecordCount: 22,
  payload: [
    {
      OrderID: 1,
      CustomerName: 'Microsoft',
      ShippedDate: '2016-03-19T19:00:00',
      ShipperCity: 'Guadalajara, JAL, Mexico',
      Amount: 300.00
    },
    {
      OrderID: 2,
      CustomerName: 'Microsoft',
      ShippedDate: '2016-11-08T18:00:00',
      ShipperCity: 'Los Angeles, CA, USA',
      Amount: 9.00
    },
    {
      OrderID: 3,
      CustomerName: 'Unosquare LLC',
      ShippedDate: '2016-11-08T18:00:00',
      ShipperCity: 'Guadalajara, JAL, Mexico',
      Amount: 92.00
    },
    {
      OrderID: 4,
      CustomerName: 'Vesta',
      ShippedDate: '2016-03-19T19:00:00',
      ShipperCity: 'Portland, OR, USA',
      Amount: 300.00
    },
    {
      OrderID: 5,
      CustomerName: 'Super La Playa',
      ShippedDate: '2016-04-23T10:00:00',
      ShipperCity: 'Leon, GTO, Mexico',
      Amount: 174.00
    },
    {
      OrderID: 6,
      CustomerName: 'OXXO',
      ShippedDate: '2016-12-22T08:00:00',
      ShipperCity: 'Guadalajara, JAL, Mexico',
      Amount: 92.00
    },
    {
      OrderID: 7,
      CustomerName: 'Super La Playa',
      ShippedDate: '2016-03-19T19:00:00',
      ShipperCity: 'Portland, OR, USA',
      Amount: 300.00
    },
    {
      OrderID: 8,
      CustomerName: 'Super La Playa',
      ShippedDate: '2016-04-23T10:00:00',
      ShipperCity: 'Leon, GTO, Mexico',
      Amount: 15.00
    },
    {
      OrderID: 9,
      CustomerName: 'OXXO',
      ShippedDate: '2016-12-22T08:00:00',
      ShipperCity: 'Guadalajara, JAL, Mexico',
      Amount: 92.00
    },
    {
      OrderID: 10,
      CustomerName: 'Vesta',
      ShippedDate: '2016-03-19T19:00:00',
      ShipperCity: 'Portland, OR, USA',
      Amount: 300.00
    }
  ],
  totalPages: 3,
  totalRecordCount: 22
};

ColumnModel class

It represents a DataGrid column and its constructor requires a name identifier as well as an object of column options with the following properties:

Name Type Default Value Description Options
name string This is required and represents a property of the entity which we are binding. -
aggregate AggregateFunctions The aggregation function that will be applied to this column. None, Sum, Average, Count, DistinctCount, Max, Min
dataType ColumnDataType String The column type. String, Numeric, Boolean, Date, DateTime, DateTimeUtc
filterable bool false Enables filtering. -
isKey bool false Defines if a column is an identifier or not. -
label string The name of the column Column label that will be shown. -
searchable bool true Indicates that a column can be used to search upon. -
sortDirection ColumnSortDirection - None, Ascending, Descending
sortOrder number -1 - -
sortable bool false Determines if a column can be sorted. -
visible bool true Specifies if a column should be shown. -

Related Projects

Name Type Language/tech Description
Tubular React Common Library React React hooks to integrate with any Grid component.
Tubular React Library React Tubular-React is a DataGrid component using Material-UI
Tubular Dotnet Backend library C#/.NET Core Tubular provides .NET Framework and .NET Core Library to create REST service to use with Tubular Angular Components easily with any WebApi library (ASP.NET Web API for example).
Tubular Nodejs Backend Library Javascript Tubular Node.js provides an easy way to integrate Tubular Angular Components easily with any Node.js WebApi library.