react-bs-simple-datatable: A TypeScript repository from saswat3115

React-bs-simple-datatable

A react component data-table librabry. Latest version - v1.0.3

How to Use
Configuration

How to Use

<DataTable
    headers={headers}
    body={bodyAsJSONArray}
    isPaging
    pageSize={3}
    noOfIndexToBeShown={3}  
    enableDelete
    enableEdit    
    onRowUpdate={methodToHandleEditingRecord}
    enableFilter
  />

Datatable Header Configuration

Specify header type as IHeaderType[].
title is what to show in data table header
prop is property name of data source
enableSort to enabe sorting to specific column
noEdit to restrict editing the specific column
type is data type of property
optionsOnEdit provides multiple option while on edit mode (provide only when the field is a dropdown)

Following code is a header sample. Pass this headers object to headers props of DataTable component

var headers: IHeaderType[] = [
  { title: "Id", prop: "id", enableSort: true, noEdit: true },
  { title: "Name", prop: "name", enableSort: true },
  { title: "Address", prop: "add" },
  { title: "Age", prop: "age", enableSort: true},
  { title: "Country", prop: "country", enableSort: true,  type: PropDataType.MULTI_OPTION, optionsOnEdit: sampleOptions},
  { title: "Status", prop: "status", type: PropDataType.CHECKBOX }
];

var sampleOptions = [ "USA", "IND", "AUS"];

Header Types

Header type as follows

interface IHeaderType {
    title: string;
    prop: string;
    enableSort?: boolean;
    type?: PropDataType;
    optionsOnEdit?: any;
    noEdit?: boolean;
}

Property types as follows

enum PropDataType {
    TEXT, MULTI_OPTION, CHECKBOX
}

Sorting

enableSort: true in header configuration to enable sorting

Paging

Provide isPaging to enable pagination
Provide pageSize={noOfRecordsPerPage} to show specific number of records per page
Provide noOfIndexToBeShown={3} to show number of page indexes in paging div

<DataTable isPaging pageSize={3} noOfIndexToBeShown={3} />

Filter

Provide eneableFilter props to enable filter operation in datatable NOTE: By default filter is wild card search from every column

<DataTable enableFilter />

Edit

Provide enableEdit props to enable edit button in data table <DataTable enableEdit />

Handle Edit Delete Data

Add a event handler to handle modified record. NOTE: DataTable component temporarily updates the record in memory and emits the modifed record for you. Pass your method to handle that object as shown below. This will work in both update and delete operation

<DataTable
    onRowUpdate={methodToHandleEditingRecord}
  />

function methodToHandleEditingRecord(record) {
    // record object holds the selected edited record from data source
    // update to database
}

saswat3115/react-bs-simple-datatable