Skip to content

saswat3115/react-bs-simple-datatable

Repository files navigation

React-bs-simple-datatable

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

data-table

Table of Contents

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} />

paging snapshot

Filter

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

<DataTable enableFilter />

fliter snapshot

Edit

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

edit snapshot edit snapshot on click

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
}
  

About

a react data-table component built on react and bootstrap

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published