Giter Club home page Giter Club logo

tubular-react's Introduction

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'

tubular-react's People

Contributors

alexis-wizeline avatar anyxleo avatar arcigo avatar buda1994 avatar cifucid09 avatar dependabot-preview[bot] avatar dependabot[bot] avatar erickgarciarios avatar geoperez avatar israelramosm avatar jpalcala avatar kadosh avatar manusanram avatar marcolpr avatar metalerk avatar nickpalmer avatar osmarpb97 avatar rohanksahu avatar serk352 avatar solenasth avatar xquetzalcoatl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tubular-react's Issues

Fix index exports

Module not found: Error: Can't resolve 'tubular-react' is thrown when importing any component from the npm module

Wrong column array structure

Current structure example:

 {
    Label: 'Label',
    Name: 'Name',
    Sortable: true,
    SortOrder: 1,
    SortDirection: 'None',
    IsKey: false,
    Searchable: true,
    Visible: true,
    Filter: { 
      Argument: [],
      HasFilter: false,
      Name: 'Name',
      Operator: 'None',
      OptionsUrl: null,
      Text: null
    },
    DataType: 'string',
    Aggregate: 'Count'
  }

how it should be :

{
   Name: 'Name',
    Sortable: true, 
    SortOrder: 1,
    SortDirection: 'Ascending',
    Searchable: true,
    Aggregate: 'Count',
    Filtering: true
}

with these default values:

{
    Sortable: false, // if sortable is true SortOrder and SortDirection must be set passed as well   
    Searchable: false,
    Aggregate: 'None',
    Filtering: false,
    DataType: 'string',
    IsKey: false,
    Visible: true
}

Add GridBody component

Up to this moment the grid is rendering a grid body that cannot be customized. Please add the ability to customize the grid body or render using the default format (as it is now)

Unit test for LocalDataSource

Basics:

  • Returns a payload
  • Returns a payload with 10 records
  • Returns a payload with 10 records when page is set to 1
  • Returns a payload in descending order
  • Returns a payload with multiple sorting
  • Returns a payload with search by text

Numeric filtering:

  • Case None
  • Case Equals
  • Case Between
  • Case >=
  • Case >
  • Case <=
  • Case <
  • Case when a register is not found in the <Grid />

String filtering:

  • Case None
  • Case Equals
  • Case Not Equals
  • Case Contains
  • Case Starts With
  • Case Not Starts With
  • Case Ends With
  • Case Not Ends With
  • Case when a register is not found in the <Grid />

Add unit test cases

Unit tests:

  • Default body
  • Custom body
  • When custom footer is not defined
  • When custom footer is defined
  • Clean <Grid /> file test: Some constants were removed and placed into files to make the tests more readable

Add README

Please include a README file so we can describe how tubular-react should be implemented and any proper details.

Create Column Model

Please create a column model class that can be used instead of the "any" we're using at this moment when dealing with columns.

Issue11-Filter operations

  • Add filters to columns to filter it by operator (>, <, >=, =<, BETWEEN, EQUALS, NONE, CONTAINS, NOT CONTAINS, STARTS WITH, NOT STARTS WITH, ENDS WITH, NOT ENDS WITH)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.