react-table-lite

A lightweight easy to use and easily customizable React Component for rendering a table from JSON with minimal code.

Click here for demo

Features:

• Fully Customizable: Style props and CSS classes can be added to easily customize the table.

• JSON data array: Accepts data array and renders them in respective table headers.

• Sort data by header: Accepts array of keys which is a subset of headers for displaying sorted table data.

• Searchable: Data can be searched by enabling ‘searchable’ prop and providing comma separated search strings. Specify columns to be searched using 'searchBy' props.

• Download Table Data: Use ‘downloadable’ prop to enable a button that exports table data as .csv, button is also customizable, default is false.

• Row Actions: Use ‘showAction’ prop to append a column in the end of the table which will enable user to use row operations (CRUD) like view, edit and delete, default is false.

• Custom Actions: If ‘showAction’ prop is enabled, use ‘actionTypes’ to provide which actions to display. If not provided, will display all actions.

• Actions Callback: If ‘showAction’ prop is enabled, use ‘onRowDelete’, ‘onRowEdit’ and ‘onRowView’ to provide respective action callbacks. The last two args of callback will return event and row Object.

• Customize no data message: Use ‘noDataMessage’ prop to provide empty data message.

• Multi Select: Use ‘enableMultiSelect’ prop to enable checkboxes for each row. Provide ‘checkedKey’ for selected rows in data json object. Provide ‘disableCheckedKey’ for non selectable rows in data json object.

• Custom Render Cell: Render custom element in cells for any header by passing a render function wrapped in a JSON object and passed using ‘customRenderCell’ prop.

• Custom Render Action Buttons: Render custom element for action buttons by passing a render function wrapped in a JSON object with keys edit, view, delete and passed using ‘customRenderActions’ prop.

• Custom Search: Create your own search form and pass it's ref using ‘searchFormRef’ prop for a same functionality like the built-in search.

• Custom Download: Create your own download button and pass it's ref using ‘downloadCsvButtonRef’ prop for a same functionality like the built-in download.

• Custom Headers Labels: Use ‘customHeaders’ prop to give custom text in table header.

• Custom Download listener: Use ‘onDownload’ props to attach a callback function on built-in csv download.

• Sort Listener: Use ‘onSort’ props to receive the updated data state after sorting.

• Pagination: Use ‘showPagination’ prop to enable pagination with custom range using ‘showNumberofPages’ prop. Pagination also requires ‘totalPages’, ‘currentPage’ and ‘onPaginate’ props.

• Per Page: Use ‘showPerPageLimitOptions’ prop to enable per page drop down. Pass callback function in ‘onPerPageLimitSelect’ prop and current per page limit in ‘currentPerPageLimit’ prop.

Preview:

Plain View

With Actions Enabled

Custom Styling and Actions

Custom Render Cell and Actions

Example:

import React from 'react';
import Table from "react-table-lite";

function UserData(props){
     let Users = [
      {
        id: 1,
        name: "John Doe",
        department: "Finance",        
        selected: true,
        email: "[e-mail]",
      },
      {
        id: 2,
        name: "Kazuki Yashiro",
        department: "Finance",        
        email: "[e-mail]"
      },
      {
        id: 3,
        name: "Eddie Memon",
        department: "Customer Support",        
        email: "[e-mail]"
      },
      {
        id: 4,
        name: "Ashiq Nuri",
        department: "Human Resource",
        email: "[e-mail]"
      }
    ];
      return(
        <Table
           data = {Users}		
           // Array of JSONObjects(required)
           headers = {["id","name","department","email"]}  
           // Headers should be same as data JSON Object's keys (required)
           sortBy = {["name", "department"]}
           // keys for sorting should be present in headers array
           customHeaders = {{"name":"employee"}}
           // custom header label in JSON        
           searchable = {true}
           // Enable table search field
           searchBy = {["name", "email"]}
           // keys for sorting should be present in headers array
           downloadable = {true}
           // Pass true to enable download button
           csvKeys = {["name","department","email"]} 
           // The CSV file will include these fields only
           downloadCsvButtonRef = {customDownloadButtonRef}
           // Here customDownloadButtonRef is a ref of custom button element
           searchFormRef = {customSearchFormRef}
           // Here customSearchFormRef is a ref of custom form element
           fileName = {"Table_Data"}
           // Default name of downloaded csv file
           noDataMessage = {"my custom no data"}
           // Custom no data string.            
           showActions = {true}
           // Enable Row Operation
           showPagination = {true}
           // Enable Pagination
           totalPages = {10} 
           // Total Pages of data
           currentPage = {1}
           // Current Page number
           showNumberofPages = {5}
           // Range for show page number 
           showPerPageLimitOptions = {true}
           // Show selection to change per page item limit
           currentPerPageLimit = {10}
           // Set current per page item limit
           actionTypes = {["edit","delete","view"]} 
           // Type of Row Operation (case insensitive)
           showMultiSelect = {true}
           // Enable Multi-select
           checkedKey = {"selected"}
           // Key present in data to mark row checked
           disableCheckedKey = {"selectDisabled"}
           // Key present in data to make row checkbox disabled
           perPageLimitOptions = {[10, 30, 50, 100]}
           // Array of numbers for options in per page limit selection
           containerStyle = {{}}
           // Customize table container style           
           tableStyle = {{}}
           // Customize table style
           headerStyle = {{}}
           // Customize table header style
           rowStyle = {{}}
           // Customize table row style
           cellStyle = {{}}
           // Customize table data cell style
           customRenderCell = {{
              name: (row) => (
                <a href={'/employee-profile/' + row.id} className='custom-class'> {row.name} </a>
              ),
              department: (row) => (
                <span className='custom-class'> {row.department} </span>
              )
           }}
           // Custom render function in JSON Object for table cells
           // it will render any custom element in place of default value of cell in column
           // in this case an <a> element will be rendered at each row in name column
           // and a <span> element will be rendered at each row in department column 
           customRenderActions = {{
              view: (row) => (
                <button onClick={event => customViewRow(event, row)}> view </button>
              ),
              edit: (row) => (
                <button onClick={event => customEditRow(event, row)}> Edit </button>
              ),
              delete: (row) => (
                <button onClick={event => customDeleteRow(event, row)}> Delete </button>
              ),
           }}
           // Custom render function in JSON Object for action buttons
           // it will render any custom element in place of view, edit and delete action button
           onSort = {(event, data, sortedBy, direction) => {
            console.log(event, data, sortedBy, direction);  
             // 'data' returns new sorted data
             // 'sortedBy' returns the sorting key
             // 'direction' is asc (ascending) or dsc (descending)
             // **if onSort prop is passed, sorting will not update the table view
           }}
           onRowSelect = {(args, event, row) => {
            console.log(event, row);
            // 'row' returns row object 
            // any arguments passed will be before 'event' and 'row'
           }}
           onAllRowSelect = {(args, event, allrows) => {
            console.log(event, allrows);
            // 'allrows' returns JSON objects of all rows of table
            // any arguments passed will be before 'event' and 'allrows'
           }}
           onRowDelete = {(args, event, row) => {
            console.log(event, row);
            // 'row' returns row object
            // any arguments passed will be before 'event' and 'row'
           }}
           onRowEdit = {(args, event, row) => {
            console.log(event, row);
            // 'row' returns row object
            // any arguments passed will be before 'event' and 'row'
           }}
           onRowView = {(args, event, row) => {
            console.log(event, row);
            // 'row' returns row object
            // any arguments passed will be before 'event' and 'row'
           }}
           onDownload = {(event) => {
            console.log(event);
             // Callback run after download csv button is clicked
           }}
           onPaginate = {(args, event, currentPage) => {
            console.log(event, currentPage);
            // 'currentPage' returns updated current page;
            // any arguments passed will be before 'event' and 'currentPage'
           }}
           onPerPageLimitSelect = {(args, event, limit) => {
            console.log(event, limit);
            // 'limit' returns the selected item limit from the menu;
            // any arguments passed will be before 'event' and 'limit'
           }}
        />
      );
  }

Props:

Prop	Type	Description
headers	Array	Array of string will be rendered as table headers (required)
data	Array	Array of JSON objects to be rendered in table, keys should match with table headers (required)
actionTypes	Array	Array of string containing action name (view, edit, delete) to enable and show action button
sortBy	Array	Array of string which matches the headers for sorting data in table body
searchBy	Array	Array of string which matches the headers for searching data in table body
csvKeys	Array	Array of string which matches the headers for including in csv file for download
perPageLimitOptions	Array	Array of numbers for options in per page limit selection
customHeaders	JSON	Key is from headers props, value is string that to be replaced
customRenderCell	JSON	Key is from headers prop, value is a render function which will be rendered under the header in each row
customRenderActions	JSON	Key is either 'view', 'edit' or 'delete', value is a render function which will be rendered under the actions column in each row
searchFormRef	Ref	Ref of a custom form element to attach table's default search functionality
downloadCsvButtonRef	Ref	Ref of a custom button element to attach table's default dwonload csv functionality
noDataMessage	String	String used for 'No data' message
fileName	String	String used as default filename for csv files when downloading
checkedKey	String	Key in JSON data object to 'check' the row
disableCheckedKey	String	Key in JSON data object to disable selection of that row
totalPages	Number	Total Pages of data
currentPage	Number	Current Page number
currentPerPageLimit	Number	Current value of per page limit
showNumberofPages	Number	Range for show page number
showActions	Boolean	Enable to show actions column
searchable	Boolean	Pass ‘true’ to enable search field
downloadable	Boolean	Pass ‘true’ to enable download csv button
showMultiSelect	Boolean	Enable to show multi select
showPagination	Boolean	Enable to show pagination
showPerPageLimitOptions	Boolean	Enable to show per page limit selection
onSort	Callback	Callback function on sort
onRowSelect	Callback	Callback function on row select
onAllRowSelect	Callback	Callback function on all row select
onRowView	Callback	Callback function on row view
onRowEdit	Callback	Callback function on row edit
onRowDelete	Callback	Callback function on row delete
onPaginate	Callback	Callback function for pagination
onDownload	Callback	Callback function for download
onPerPageLimitSelect	Callback	Callback function for per page limit select
containerClass	String	CSS class for table's container
tableClass	String	CSS class for table
headerClass	String	CSS class for table's th
rowClass	String	CSS class for table's tr
cellClass	String	CSS class for table's td
checkboxClass	String	CSS class for multiselect checkbox
tableTopSectionClass	String	CSS class for container of search-bar and csv button
tableBottomSectionClass	String	CSS class for container of pagination and per page
perpageLimitOptionClass	String	CSS class for per page limit selection
actionButtonContainerClass	String	CSS class for action button container
actionButtonClass	String	CSS class for view, edit and delete action buttons
actionButtonIconClass	String	CSS class for action button icons
searchFormClass	String	CSS class for default search form
searchFormInputClass	String	CSS class for default search form input
searchFormButtonClass	String	CSS class for default search form button
searchFormButtonIconClass	String	CSS class for default search form button icon
downloadCsvButtonClass	String	CSS class for default csv download button
downloadCsvButtonIconClass	String	CSS class for default csv download button icon
paginationContainerClass	String	CSS class for pagination container
paginationIconClass	String	CSS class for pagination left and right arrow icon
paginationItemClass	String	CSS class for pagination numbers
paginationActiveItemClass	String	CSS class for active page number
containerStyle	Style	Style object for parent container
tableStyle	Style	Style object for table
headerStyle	Style	Style object for table header
rowStyle	Style	Style object for table rows
cellStyle	Style	Style object for table cells