Open Source Software Initiatives from Unosquare tubular-react

AdvancePaginationActions

Custom dropdown showing the different operators used to filter data on a column.

PROPERTIES

Name	Type	Description	Optional	Default value
count	number	number of pages to go through	No	None
isAdvanced	boolean	Check if count or paginator has advanced	No	None
isLoading	boolean	Checks when grid content is loading after page changed	No	None
page	number	Current page	No	None
rowsPerPage	number	Number of table rows on each page	No	None
onChangePage	Function	Function that handles the changing and rendering of the content of the grid on a new page	No	None

DataGrid

The grid will connect to a remote datasource or have a local datasource depending on what's passed in the dataSource property.

PROPERTIES

Name	Type	Description	Optional	Default value
columns	ColumnModel[]	Array that defines the type of columns to be rendered on the grid	No	None
dataSource	Object[] string Request TubularHttpClientAbstract	Source of the data for the grid	No	None
deps	any[]	Array of dependencies for grid	No	None
detailComponent	React.ReactElement	Element used to render row details	No	None
gridName	string	Name of the grid - Note: two or more grids with same name may cause problems	No	None
storage	DataGridStorage	Save data to localStorage	Yes	None
toolbarOptions	ToolbarOptions	Options to present on the grid	Yes	None
mobileBreakpointWidth	number	Minimum width to change style to mobile version	Yes	None
rowComponent	React.FunctionComponent	Custom row component	Yes	None
rowMobileComponent	React.FunctionComponent	Custom row component for mobile version	Yes	None
footerComponent	React.FunctionComponent	Custom component for Grid footer	Yes	None
onError	Function	Function to handle errors	Yes	None
onRowClick	Function	Function to handle when a row is clicked	Yes	None

Example of DataGrid


                      import { DataGrid } from "tubular-react";
            const RemoteDataGrid: React.FunctionComponent = () => {
              return (
                < DataGrid
                  gridName="Tubular-React"
                  columns={columns}
                  dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                />
              );
            };

Open CodeSandbox

DataGridCard

Visualizes a grid element in a Material UI card.

PROPERTIES

Name	Type	Description	Optional	Default value
columns	ColumnModel[]	Columns that compose the grid	No	None
item	Object	Description of the object	No	None
onClickCallback	Function	Function to handle the click event over a grid's row - Takes a row object as parameter	No	None

DataGridTable

The grid will connect to a remote datasource or have a local datasource depending on what's passed in the dataSource property.

PROPERTIES

Name	Type	Description	Optional	Default value
tbTableInstance	ITbTableInstance	Table instance to render props on grid	No	None
rowComponent	React.FunctionComponent	Component that renders a grid row	No	None
footerComponent	React.FunctionComponent	Component that renders the grid footer	No	None
detailComponent	React.ReactElement	Element that renders the details of a row	Yes	None
onRowClick	Function	Function to be passed when row element is clicked - Note: Takes a row object	Yes	None

DialogModal

Opens a modal dialog when clicking a row.

PROPERTIES

Name	Type	Description	Optional	Default value
anchorFilter	HTMLElement	Element binding filter dialog	No	None
activeColumn	ColumnModel	Active column of the Grid	No	None
setAnchorFilter	Function	Function to configure anchor to UI element	No	None
setFilter	Function	Function to filter the Column data	No	None
handleFilterChange	Function	Function to handle the UI rendering changes	No	None

Example of DialogModal

Filterable columns have dialog modal by default


                      /* Only filterable columns have a dialog modal by default */
            const columns = [
              ...
              new ColumnModel("CustomerName", {
                aggregate: AggregateFunctions.Count,
                filterable: true,
                searchable: true,
                sortable: true
              })
            ]
            -----------------------------------------------------------------------------
            import { DataGrid } from "tubular-react";
            const RemoteDataGrid: React.FunctionComponent = () => {
              return (
                < DataGrid
                  gridName="Tubular-React"
                  columns={columns}
                  dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                />
              );
            };

Open CodeSandbox

ExportButton

Button utilized to export the data grid into a file

PROPERTIES

Name	Type	Description	Optional	Default value
type	string	Type of exporting	No	None
gridName	string	Name of the grid exporting the data	No	None
filteredRecordCount	number	Count of records filtered to be exported	No	None
toolTip	string	Tolltip description for	Yes	None
exportTo	Function	Function for exporting	No	None

Example of ExportButton


                      import { DataGrid, ToolbarOptions } from "tubular-react";
            const RemoteDataGrid: React.FunctionComponent = () => {
              const toolbarOptions = new ToolbarOptions({
                advancePagination: false,
                bottomPager: false,
                exportButton: true,
                printButton: false,
                searchText: false,
                topPager: false
              });
              return (
                < DataGrid
                  gridName="Tubular-React"
                  columns={columns}
                  dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                  toolbarOptions={toolbarOptions}
                />
              );
            };

Open CodeSandbox

GridBody

The grid will connect to a remote datasource or have a local datasource depending on what's passed in the dataSource property.

PROPERTIES

Name	Type	Description	Optional	Default value
detailComponent	React.ReactElement	Component that renders a row's details	Yes	None
tbTableInstance	ITbTableInstance	Instance of a table to render its props	No	None
rowComponent	React.FunctionComponent	Component that renders a grid row	No	None
onRowClick	Function	Function to be passed when row element is clicked - Note: Takes a row object	Yes	None

GridHeader

Sets the header row for a grid.

PROPERTIES

Name	Type	Description	Optional	Default value
tbTableInstance	ITbTableInstance	Instance of a table to render its props	Yes	None
detailComponent	React.ReactElement	Component that renders a row's details	No	None

GridHeaderCell

Sets the header cell for a grid.

PROPERTIES

Name	Type	Description	Optional	Default value
column	ColumnModel	Column to get data for cell	No	None
key	string	Key for the cell	No	None
setActiveColumn	Function	Function to configure column as active	No	None
sortColumn	Function	Function to sort the data of the column	No	None

GridToolbar

Toolbar options of the Grid.

PROPERTIES

Name	Type	Description	Optional	Default value
toolbarOptions	ToolbarOptions	Options included on the grid	No	None
gridName	string	Name of the grid that has this toolbar options assigned	No	None
tbTableInstance	ITbTableInstance	Table assigned to the grid.	No	None

MasterDetailRow

Sets the header cell for a grid.

PROPERTIES

Name	Type	Description	Optional	Default value
detail	React.ReactElement	Detail component to render details of a render	No	None
renderCells	any	Object to render	No	None
style	React.CSSProperties	Object to style component	No	None
clickEvent	Function	Function to handle onClick events	No	None
rowData	Object	Object to represent data of the column	No	None
columns	ColumnModel[]	Columns of header details	No	None

Example of DataGrid with details row.


                      import { DataGrid, DetailBaseComponent } from "tubular-react";
            export interface DetailBaseComponentProps { row: any; }
            const DetailComponent: DetailBaseComponent = ({row}: DetailBaseComponentProps)
              => <>This is a test with the row #{row.OrderID}</>;
            const RemoteDataGrid: React.FunctionComponent = () => {
              return (
                < DataGrid
                  gridName="Tubular-React"
                  columns={columns}
                  dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                  detailComponent={< DetailComponent />}
                />
              );
            };

Open CodeSandbox

MobileDataGridTable

Sets the row for a mobile grid.

PROPERTIES

Name	Type	Description	Optional	Default value
tbTableInstance	ITbTableInstance	Instance of table to represent data	No	None
rowComponent	React.FunctionComponent	Component for custom row	No	None
onRowClick	Function	Function to handle when row is clicked	No	None

Example of DataGrid with MobileResolution breakpoint.


                      import { DataGrid, ToolbarOptions } from "tubular-react";
            import columns from "./columns";
            const mobileBreakpointWidth = 800;
            const RemoteDataGrid: React.FunctionComponent = () => {
              return (
                <>
                  < h4>Try to change the resolution...< /h4>
                  < DataGrid
                    gridName="Tubular-React"
                    columns={columns}
                    dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                    mobileBreakpointWidth={mobileBreakpointWidth}
                  />
                </>
              );
            };

Open CodeSandbox

NoDataRow

Sets the row for a mobile grid.

PROPERTIES

Name	Type	Description	Optional	Default value
columns	ColumnModel[]	Columns	No	None
styles	any	Object to style grid	No	None

OperatorsDropdown

Custom dropdown showing the different operators used to filter data on a column.

PROPERTIES

Name	Type	Description	Optional	Default value
activeColumn	ColumnModel	Active column of the grid	No	None
handleFilterChange	Function	Function that controls the change of the grid rendering	No	None

Example of OperatorsDropdown

When filtering a column's data, a default OperatorsDropdown will appear


                      /* Only filterable columns have a dialog modal by default */
            const columns = [
              ...
              new ColumnModel("CustomerName", {
                aggregate: AggregateFunctions.Count,
                filterable: true,
                searchable: true,
                sortable: true
              })
            ]
            -----------------------------------------------------------------------------
            import { DataGrid } from "tubular-react";
            const RemoteDataGrid: React.FunctionComponent = () => {
              return (
                < DataGrid
                  gridName="Tubular-React"
                  columns={columns}
                  dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                />
              );
            };

Open CodeSandbox

Paginator

Paginator component to handle when grid contains tpp much data

PROPERTIES

Name	Type	Description	Optional	Default value
tbTableInstance	ITbTableInstance	Instance of a table component	No	None
rowsPerPageOptions	number[]	Number of rows for each page of the grid	No	None
advancePagination	boolean	Checks if pagination does advanced	No	None

SearchTextInput

Custom search input for the grid.

PROPERTIES

Name	Type	Description	Optional	Default value
searchText	string	Search text to query data on Grid	No	None
updateSearchText	Function	Function that controls the change of the input	No	None

TbList

Tubular list of items

PROPERTIES

Name	Type	Description	Optional	Default value
tbTableInstance	ITbTableInstance	Instance of a table component	No	None
rowsPerPageOptions	number[]	Number of rows for each page of the grid	No	None
advancePagination	boolean	Checks if pagination does advanced	No	None

Example of TbList


                      import { TbList, TbListItem } from "tubular-react";
            const MyListItem: React.FunctionComponent = ({
              rowStyle,
              selectedIndex,
              onItemClick,
              row
            }: any) => {
              return (
                < TbListItem
                  selectedIndex={selectedIndex}
                  onItemClick={onItemClick}
                  row={row}
                  rowStyle={rowStyle}
                  columns={columns}
                />
              );
            };
            const RemoteDataGrid: React.FunctionComponent = () => {
              const tbList = useTbList(
                columns,
                "https://tubular.azurewebsites.net/api/orders/paged"
              );
              const rowClick = () => {
                console.log("You clicked on a row!");
              };
              return (
                < TbList
                  listItemComponent={MyListItem}
                  onItemClick={rowClick}
                  tbInstance={tbList}
                />
              );
            };

Open CodeSandbox

TbListItem

Paginator component to handle when grid contains tpp much data

PROPERTIES

Name	Type	Description	Optional	Default value
tbTableInstance	ITbTableInstance	Instance of a table component	No	None
rowsPerPageOptions	number[]	Number of rows for each page of the grid	No	None
advancePagination	boolean	Checks if pagination does advanced	No	None

TbMobileRow

The grid will connect to a remote datasource or have a local datasource depending on what's passed in the dataSource property.

PROPERTIES

Name	Type	Description	Optional	Default value
columns	ColumnModel[]	Columns to be rendered on the row	No	None
onRowClick	Function	Function to handle the click event over a grid's row - Takes a row object as parameter	No	None
row	Object	Row from the data grid	No	None

TbRow

The grid will connect to a remote datasource or have a local datasource depending on what's passed in the dataSource property.

PROPERTIES

Name	Type	Description	Optional	Default value
row	Object	Row from the data grid	No	None
rowIndex	number	Index of the row to be rendered	No	None
columns	ColumnModel[]	Columns to be rendered on the row	No	None
onRowClick	Function	Function to be passed when row element is clicked	Yes	None

Example of DataGrid with custom row component.


                      import { DataGrid, TbRow, TbRowProps } from "tubular-react";
            const rowClick = () => {
              console.log("You clicked on a row!");
            };
            const CustomTbRow: React.FunctionComponent< TbRowProps > = ({
              row,
            }: TbRowProps) => (
              < TbRow
                columns={columns}
                row={row}
                rowIndex={row.OrderID}
                onRowClick={rowClick}
              />
            );
            const RemoteDataGrid: React.FunctionComponent = () => {
              return (
                < DataGrid
                  gridName="Tubular-React"
                  columns={columns}
                  dataSource="https://tubular.azurewebsites.net/api/orders/paged"
                  rowComponent={CustomTbRow}
                />
              );
            };

Open CodeSandbox