Rdatable NPM | npm.io

rdatable

React Data Table

Installation

Use the package manager npm to install datable.

npm install rdatable

HowTo

To render a datatable using rdatable you need 3 basic things

Data | An array of any[]
css classes for the search bar
css classes for the pagginator

Implementing this is just simple (as the example below shows), just import the css style, import the component, thats all.

In the code bellow, you can see how a custom cell is rendered using typescript (TSX), if you're using javascript just access the property "Data"

Usage

import React from 'react'
import 'rdatable/build/css/style.css'
import Datable from 'rdatable/build'
import { IRenderProps } from 'rdatable/build/interfaces'

const Component = () => (
    <Datable 
        Color="dark" 
        CurrentPage={0} 
        Data={[
            {Id:0, Name: "Carlos"}, 
            {Id:1, Name: "Daniel"},
            {Id:2, Name: "Daniel"},
            {Id:3, Name: "Daniel"},
            {Id:4, Name: "Daniel"},
            {Id:5, Name: "Daniel"},
            {Id:6, Name: "Daniel"},
            {Id:7, Name: "Daniel"},
            {Id:8, Name: "Daniel"},
            {Id:9, Name: "Daniel"},
            {Id:10, Name: "Daniel"},
            {Id:11, Name: "Daniel"},
            {Id:12, Name: "Daniel"},
            {Id:13, Name: "Daniel"},
            {Id:14, Name: "Daniel"},
            {Id:15, Name: "Daniel"},
        ]} 
        Columns={[
            { Header: "Id", Filter: true, OrderBy: true, Item: "Id" }, 
            { Header: "Nombre", Filter: true, OrderBy: true, Item: "Name", 
                Render: (props: IRenderProps) => 
                {
                    console.log(props.Data.Name)
                    return (<span>{props.Data.Name}</span>)
                } 
            }
        ]} 
        Filter=""
        ItemsPerPage={10}
        OrderBy={[
        { Column: "Id", Order: 0 }
        ]}
        ShowFilter={true}
        FilterCustomize={{
            Container_Main_Class: "row justify-content-md-end",
            Container_Sub_Class: "col-sm-12 col-md-6",
            Input_Placeholder: "Buscar",
            Input_Container_Class: "input-group mb-2",
            Input_Control_Class: "form-control"
        }}
        PaginatorCustomize={{
            Container_Main_Class: "paginator-container mt-3",
            Button_List_Class: "btn-group",
            Button_Class: "btn btn-secondary", 
            Button_Active_Class: "btn btn-success"
        }}
    />
)



export default Component

Datable properties

prop	type	Description	Obligatory	Default
Data	any[]	Data to display	yes	-
Header	string	Header on the table	yes	-
Filter	string	Initial filter	no	""
CurrentPage	number	Current page to initial render	no	0
ItemsPerPage	number	Number of items to render per page	no	10
ShowFilter	boolean	Display the filter component	no	true
OrderBy	IOrderBy[]	Default ordering of the table	no	[]
FilterCustomize	IFilterCustomize	CSS Classes for the filter	no	NO CSS
PaginatorCustomize	IPaginatorCustomize	CSS Classes for the filter	no	NO CSS

Row properties

Prop	type	Description	Obligatory	Default
Item	string or string[]	propert(y/ies) of the data to render, order and fiter if enabled	yes	-
Filter	boolean	Enable filtering data based on this column	no	false
OrderBy	boolean	Enable ordering data based on this column	no	false
Render	function	Renders this cell using a custom render, the render implements IRenderProps [Data: any, Table: IDatable Datable properties]	no	default render on span

IFilterCustomize

Prop	type	Description	Obligatory	Default
Container_Main_Class	string	Css class name for the main div	no	-
Button_List_Class	string	Css class name for the div containing the controls	no	-

IPagginatorCustomize

Prop	type	Description	Obligatory	Default
Container_Main_Class	string	Css class name for the main div	no	-
Button_List_Class	string	Css class name for button list div	no	-
Button_Class	string	Css class name for each button button	no	-
Button_Active_Class	string	Css class name for the active page button	no	-