react-table-lite v3.0.3
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: "john_doe@somedomain.com",
},
{
id: 2,
name: "Kazuki Yashiro",
department: "Finance",
email: "y_kazuki@somedomain.com"
},
{
id: 3,
name: "Eddie Memon",
department: "Customer Support",
email: "eddie254@somedomain.com"
},
{
id: 4,
name: "Ashiq Nuri",
department: "Human Resource",
email: "an452@somedomain.com"
}
];
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 |
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago