tubular-common

tubular-react npm tubular-react Github Repo

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

AggregateFunctions

Functions used operate with the column data

PROPERTIES
Name Description
None No functions added to the column
Sum Sums data on column
Average Calculates the average of the column data entries
Count Counts the number of entries in a column
DistinctCount boolean
Max Gets the maximum value of the column's data
Min Gets the minimum value of the column's data

ColumnDataType

Specifies the data type of the entries on a column

PROPERTIES
Name Description
String Defines the column's data as string values
Numeric Defines the column's data as numbers
Boolean Defines the column's data as boolean
Date Defines the column's data as date objects
DateTime Defines the column's data as date and time objects
DateTimeUtc Defines the column's data as Universal Time date time objects

ColumnModel

Model used to describe columns for the data grid

PROPERTIES
Name Type Description Optional Default value
aggregate AggregateFunctions Functions used to operate on the column's data No None
dataType ColumnDataType Type for the data on this column No None
filter
  • FilterWrapper
  • Object
 Filter of the column No None
filterable boolean Defines if column can have applicable filters on its data Yes None
isKey boolean Defines if the data of this column can be used as a DB key Yes None
label string Label shown on the header of the grid Yes None
name string Name of the column Yes None
searchable boolean Defines if column data can be searched on the SearchTextInput component of the grid Yes None
sortDirection ColumnSortDirection Defines if data should be sorted in a ascending or descending order Yes None
sortOrder number Yes None
sortable boolean Defines if the column can be used to sort data of the grid Yes None
visible boolean Defines if the Column is visible on the Grid Yes None

CompareOperators

Functions used

PROPERTIES
Name Description
None No operators added
Auto ColumnDataType
Equals Check if two values are equal
NotEquals Check if two values are not equal
Contains Check if an object value contains a property
StartsWith Checks if a string value starts with a given character
EndsWith Checks if a string value ends with a given character
Gte Checks if a value is greater than or equal to another value
Gt Checks if a value is greater than another value
Lte Checks if a value is lesser than or equal to another value
Lt Checks if a value is lesser than another value
Between Checks if a value is between two other values
NotContains Checks if an object doesn't contain a property
NotStartsWith Checks if a string doesn't start with a given character
NotEndsWith Checks if a string doesn't end with a given character

ColumnSortDirection

Directions in which the data is sorted

PROPERTIES
Name Description
None No sorting
Ascending Sort in an ascending order
Descending Sort in a descending order

DataGridStorage

Define an object to store grid data.

PROPERTIES
Name Type Description Optional Default value
setTextSearch Function Set the options to search data on grid Yes None
setPage Function Set columns for the grid to store No None
setColumns Function Set columns No None
getTextSearch Function Get textsearch result Yes None
getPage Function Get the page Yes None
getColumns Function Function that returns the grid for storing Yes None

GridRequest

Opens a modal dialog when clicking a row.

PROPERTIES
Name Type Description Optional Default value
columns ColumnModel[] Columns data that will hold the request result No None
counter number Number of registries to be input on the grid No None
search SearchOptions Options used to search for data on Grid No None
skip number Number of skipped registries No None
take number Total of items taken on request No None
timezoneOffset number Offset depending on local time No None

LocalStorage

Stores the data of the grid on the local storage. Implements DataGridStorage interface

PROPERTIES
Name Type Description Optional Default value
setGridName string Set the current grid for localStorage use Yes None
setTextSearch React.ReactElement Set a localStorage reference to store the search text result No None
setPage ITbTableInstance Set a localStorage reference to store the page Yes None
setColumns Function Set a localStorage reference to store the columns No None
getTextSearch Function Returns the localStorage reference Yes None
getPage Function Returns the localStorage reference page No None
getColumns Function Returns localStorage reference to the current page No None

NullStorage

Implements DataGridStorage interface with null results.

SearchOptions

Options to search in Grid

PROPERTIES
Name Type Description Optional Default value
operator string SQL operator to search on DB No None
text string Text input to search through data Yes None

ShallowHttpClient

Request to server

PROPERTIES
Name Type Description Optional Default value
request string Server URL to fetch data No None
handler FetchHandler Handler for fetching operations No None

TubularHttpClient

Handle requests for Tubular grid.

PROPERTIES
Name Type Description Optional Default value
request
  • string
  • Request
  • TubularHttpClientAbstract
 Request performed to fetch data from/to server No None

TubularHttpClientAbstract

Interface to create Tubular requests.

PROPERTIES
Name Type Description Optional Default value
request
  • string
  • Request
 Fetch request performed by the class No None
fetch Function Fetch function to connect to server No None