react-condensed

A fully customisable react component to build tables and datagrids

Install

npm i --save react-condensed

Features

1. Lightweight (~90kb)
2. Fully customisable
3. Selectable rows
4. Search, Sort (by string | number | date), Filter
5. Pass your components in table-cells (td)
6. Handle click on rows
7. Pagination
8. Have table with fixed height
9. Set number of rows to be shown in each page
10. Add your custom loading components

Usage

import React from "react";
import { Table } from "react-condensed";

const App = () => {

  const Columns = [
    {
      name: "Name",
      accessor: (row) => row.firstName + row.lastName,
      searchable: true,
    },
    {
      name: "Age",
      accessor: "age",
    },
    {
      name: "Gender",
      accessor: "gender",
    },
    {
      name: "Email",
      accessor: "email",
    },
  ];

  const data = [
    {
      id: 1,
      firstName: "Terry",
      lastName: "Medhurst",
      age: 50,
      gender: "male",
      email: "[e-mail]",
    },
    {
      id: 2,
      firstName: "Sheldon",
      lastName: "Quigley",
      age: 28,
      gender: "male",
      email: "[e-mail]",
    },
    {
      id: 3,
      firstName: "Terrill",
      lastName: "Hills",
      age: 38,
      gender: "male",
      email: "[e-mail]",
    },
    {
      id: 4,
      firstName: "Miles",
      lastName: "Cummerata",
      age: 49,
      gender: "male",
      email: "[e-mail]",
    },
    {
      id: 5,
      firstName: "Mavis",
      lastName: "Schultz",
      age: 38,
      gender: "male",
      email: "[e-mail]",
    },
  ];

  return (
    <Table
      columns={Columns}
      data={data}
      styleVariables={{ "font-family": "cursive" }}
    />
  );
};

export default App;

Props

Name	Type	Default value	Description
data	object [ ]	[ ]	data record array to be rendered.
columns	object [ ]	[ ]	the columns config of table, object values are defined below.
uniqueTableField	string	" "	to be used as keys for rows.
tableRef	ref{useRef}	N/A	You can pass a reference to the table. It emits a function: scrollToTop, which will allow you to manually controll scrolling of table body.
numberOfRows	number	25	to be used as keys for rows.
usePagination	boolean	false	enable or disable pagination.
searchPlaceholder	string	"Search here ..."	placeholder for search input field.
canSelectRows	boolean	false	allow row selection.
handleRowSelection	function	--	Provide a callback fuction, which will be called everytime number of selected rows change. Will receive array containing row details as argument.
handleRowClick	function	--	Provide a callback fuction, which will be called everytime a row is clicked. Will receive details of the row as argument.
styleVariables	object	all default values are defined below	Modify css variables to change font-family, color, font-size, etc.
fixedTableHeight	boolean	false	If true the table will have constant height, incase number rows fail to fill the table height empty rows will fill the rest of the table.
loading	boolean	false	If true loading screen will be shown, all row data will be hidden even if they exists.
loadingComponent	React Component	"Loading ..."	If provided it will displayed in the center of the table's body, when loading is true.
RowComponent	React Component	N/A	If provided it will receive the row details and be responsible for rendering the row
preventAutoScroll	boolean	false	By default table scrolls to initial position everytime data is altered, pass true to prevent this.However, table will auto-scroll during page change.

Column Props

Name	Type	Required	Default	Description
name	string	true	--	It is used as the column header.
accessor	string or function	false	--	It is used to access the value of the column. String = "key" or "key1.key2. ..." (to access nested value) Function = Provide a callback and return value (callback will receive row details as argument).
cell	function	false	--	Provide a callback and return jsx/component to be rendered in body-cell (callback will receive row details and index as arguments).
filter	boolean	false	false	If true, column name will be available for filtering table data, all unique values of the column will be listed as options.
hideHeader	boolean	false	false	If true, column name will be hidden from header.
preventClick	boolean	false	false	If true, clicking on this won't trigger the handleRowClick callback
searchable	boolean	false	false	If true, column will become searchable. Value returned by accessor will be used to find matches.
sortable	boolean	false	false	If true, you will be able to sort the column in ascending/descending order. Value returned by accessor will be used to find matches.
sortType	string or number or date	false	string	This specifies the datatype of the value returned by accessor.
headerCell	function	false	--	Provide a callback and return jsx/component to be rendered in the header-cell (callback will receive row details and index as arguments).
minWidth	css property	false	auto	Provide minimum width you want the cell to take up.
width	css property	false	auto	Provide width to your table cell
alignment	css property	false	center	Responsible for aligning the contents inside table cell.
wrapCellContent	boolean	false	true	Set white-space to no-wrap for table-cells by passing true

Style Variables

Variable name	Variable type	Default value
"font-family"	font-family	"Arial, Helvetica, sans-serif"
"table-container-border"	border-color	"#BBBFCA"
"header-bg"	background	"#dee1e9"
"header-column-separator"	border-color	"#ffffffd6"
"even-row-bg"	background	"#F4F4F2"
"odd-row-bg"	background	"#FFF"
"row-hover"	background	"#E8E8E8"
"body-column-separator"	border-color	"#bbbfcad6"
"scrollbar-track-bg"	background	"#ededed"
"scrollbar-thumb-bg"	background	"#c9c9c9"
"header-color"	font-color	"#323B4B"
"header-font-size"	font-size	"16px"
"header-font-weight"	font-weight	"600"
"body-font-color"	font-color	"#323c47"
"body-font-size"	font-size	"15px"
"body-font-weight"	font-weight	"500"
"select-container-border"	border-color	"#c6c6c6"
"dropdown-arrow-color"	icon-color	"#cecece"
"disabled-select-container"	background	"#f0f0f0"
"options-container-bg"	background	"#fff"
"options-container-border"	border	"1px solid #f2f2f2"
"options-container-box-shadow"	box-shadow	"1px 1px 2px #d2d2d2"
"selected-option-color"	background	"#323B4B"
"options-color"	font-color	"#323c47"
"options-font-size"	font-size	"16px"
"option-separator"	border-color	"#d2d2d2"
"option-hover"	background	"#f3f3f3"
"selected-option-bg"	background	"#e6e6e6"
"search-border"	border	"2px solid #c6c6c6"
"search-font-size"	font-size	"16px"
"search-font-color"	font-color	"#323c47"
"search-font-weight"	font-weight	"500"
"pagination-text-color"	font-color	"#323c47"
"pagiantion-text-size"	font-size	"15px"
"pagination-text-weight"	font-weight	"500"
"pagination-page-info-color"	font-color	"#323B4B"
"pagiantion-page-info-size"	font-size	"15px"
"pagination-page-info-weight"	font-weight	"500"
"head-row-height"	height	"45px"
"body-row-height"	height	"40px"
"max-table-height"	height	"100%"
"cell-content-vertical-alignment"	cell-alignment	"middle"
"empty-body-height"	height	"50px"

Global classnames

Classname	Description
tableParentContainer	Top most container(DIV_tag), consisting of table, header, and pagination.
tableContainer	Container(DIV_tag) consists of header (Search + Filters) and table.
tableHeaderContainer	Classname of the DIV_tag rendering both searchbar and filters.
tableSearchbar	Searchbar container(DIV_tag), consists of search icon and input field.
table	Classname of TABLE_tag.
emptyTableBody	Classname of the row(TR_tag) taking up the entire table body, when there is no rows available to show or during loading.
emptyTableBodyMessage	Classname of the cell(TD_tag) inside emptyTableRow, used to show message, or to render loading component if available
emptyTableRows	Classname of the empty rows(TR_tag) used to fill up the excess space in table body.
tablePaginationContainer	Classname of the DIV_tag rendering pagination.
tablePaginationDescription	Classname of the P_tag responsible for rendering the overall details of pagination
tablePaginationButtons	Classname of the pagination buttons