• This repository has been archived on 23/Nov/2022
  • Stars
    star
    205
  • Rank 191,264 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations.

npm version Buils status

Tubular-React

** THIS REPO HAS BEEN ARCHIVED**

Tubular-React is a Material-UI table (or data grid) with local or remote data-source. Featuring:

  • Define a custom layout for columns and cells using render methods.
  • Use a remote or local datasource. Remote datasource use a specific Request and Response format.
  • Sort and filter multiple columns.
  • Free-text search of string columns.
  • Page data. Remote data is paged in the server side.
  • Export data to a CSV file.
  • Print data.

You can try a CodeSandbox demo.

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.

Table of contents

Installation

$ npm install tubular-react --save

Usages

You can check the documentation of the components at https://unosquare.github.io/tubular/tubular-react

DataGrid

You can start using DataGrid with this sample code. The grid will connect to a remote datasource or have a local datasource depending on what it's passed in the dataSource property.

To create Column you have to use createColumn function and have to pass the desired name of column as string.

import React from 'react';
import ReactDOM from 'react-dom';

import { DataGrid } from 'tubular-react';
import {createColumn} from "tubular-common";

const columns = [createColumn('OrderID'), createColumn('CustomerName'), createColumn('ShipperCity')];

const SampleGrid = () => (
    <DataGrid columns={columns} dataSource={'https://tubular.azurewebsites.net/api/orders/paged'} gridName="Grid" />
);

ReactDOM.render(<SampleGrid />, document.getElementById('root'));

This is a preview of the previous code:

DataGrid

DataGrid with a remote data source

It is possible to display data from a remote source.

Remote

Edit RemoteDataGrid -Example

DataGrid with a local data source

It is possible to display data from a local data source.

Local

Edit LocalDataGrid -Example

Tubular react in a grid list

Tubular can also be used to render data in a different layout.

Grid

Edit GridList -Example

Run integrated sample

There is a sample included in this project, you can run it just by doing the following.

// Install all the dependencies
npm install
// Run the sample project
npm start

i18n Support

Tubular React now includes a brand new Language Service that will translate the content of the grid to a preferred language. Devs can also implement content on their language and import it to use this language. By default, Tubular React comes with implementations in English and Spanish. If any key content needs parameters to include in the translation, devs can pass the parameters in the translate function.

import { Lang } from 'tubular-react';

Lang.translate('PageNum', 16);
// => 'Page 16'

More Repositories

1

embedio

A tiny, cross-platform, module based web server for .NET
C#
1,460
star
2

ffmediaelement

FFME: The Advanced WPF MediaElement (based on FFmpeg)
C#
1,172
star
3

passcore

A self-service password management tool for Active Directory
C#
1,031
star
4

raspberryio

The Raspberry Pi's IO Functionality in an easy-to-use API for Mono/.NET/C#
C#
673
star
5

swan

Swan stands for Stuff We All Need. Unosquare's collection of C# extension methods and classes.
C#
262
star
6

sshdeploy

A command-line tool that enables quick build and run deployments over SSH.
C#
141
star
7

wiringpi-dotnet

Provides complete managed access to the popular wiringpi C library
C#
68
star
8

litelib

A cool little wrapper in Entity Framework style for SQLite based on Dapper
C#
63
star
9

pigpio-dotnet

Provides complete managed access to the popular pigpio C library
C
61
star
10

embedio-extras

Additional Modules showing how to extend EmbedIO.
C#
44
star
11

tubular

A set of AngularJS directives designed to rapidly build modern web applications
JavaScript
44
star
12

uno-react

Common functions, HOCs and hooks for React.
TypeScript
28
star
13

swan-aspnetcore

SWAN ASP.NET Core
C#
28
star
14

uno-material-ui

Components and extensions for Material UI
TypeScript
25
star
15

libfprint-cs

The long-awaited C# (.net/mono) wrapper for the great fprint library
C#
20
star
16

best-practices

Unosquare Labs Best Practices
JavaScript
19
star
17

tubular-dotnet

Tubular .NET Library
C#
18
star
18

ffplaydotnet

A port of FFmpeg's FFplay.c
C#
16
star
19

embedio-cli

EmbedIO CLI - .NET Core Global tool
C#
13
star
20

tubular2

Tubular for Angular 7
TypeScript
13
star
21

ef-enterpriseextensions

EntityFramework.EnterpriseExtensions Library
C#
12
star
22

sparkfunfingerprint

SparkFun Fingerprint Reader Interfacing Library for .NET Framework and .NET Core
C#
11
star
23

tenantcore

TenantCore, OWIN multitenancy
C#
10
star
24

wsfingerprint

WaveShare Fingerprint Reader Interfacing Library for .NET
C#
10
star
25

uno-js

Unosquare Typescript/JavaScript Library
TypeScript
10
star
26

tubular-common

Tubular Common Models and Data Transformer
TypeScript
10
star
27

ledemotion

LED Emotion
JavaScript
10
star
28

tubular-aspnet-core-boilerplate

Tubular ASP.NET Core Boilerplate
HTML
8
star
29

tubular-nodejs

Tubular Node.js backend
JavaScript
8
star
30

tubular-boilerplate-csharp

Tubular Boilerplate C#
JavaScript
7
star
31

unosquare.github.io

Main GitHub Pages repository
HTML
7
star
32

pocodata

The no-frills micro ORM for SQL Server
C#
7
star
33

redminetime

A Redmine time entries logger for Windows
C#
6
star
34

entityframework-specification

Unosquare EntityFramework Specification
C#
6
star
35

tubular-boilerplate

Tubular Directives Boilerplate (includes AngularJS and Bootstrap)
HTML
6
star
36

tsrelay

TinySine USB/Wireless Relay Module TOSR1x - Interfacing Library for .NET
C#
5
star
37

unolabs-pi

UnoLabs Raspberry Pi Demo
JavaScript
5
star
38

uno-dashboard-ux

Unosquare Dashboard UX/UI Components
TypeScript
4
star
39

tubular-fabric

Tubular for Office UI Fabric
TypeScript
3
star
40

.github

2
star
41

tubular-react-common

Tubular React Common functions and hooks
TypeScript
2
star
42

eslint-config-unosquare

Eslint Config Unosquare
JavaScript
1
star
43

swan-ldap

SWAN LDAP Client
C#
1
star