React-bootstrap-table-control NPM

React Bootstrap Table Control

This component facilitates the control and display of tables.

Install

npm install react-bootstrap-table-control

Usage

Component usage example.

TableControl

import 'bootstrap/dist/css/bootstrap.min.css';

import React, { useState, useEffect } from 'react';
import { TableControl } from 'react-bootstrap-table-control';

export default () => {
  return <TableControl
    header={[
      { key: "id", name: "#" },
      { key: "name", name: "Name" },
      { key: "description", name: "Description" }
    ]}
    itens={[
      { id: 1, name: "Name 1", description: "Description 1" },
      { id: 2, name: "Name 2", description: "Description 2" },
      { id: 3, name: "Name 3", description: "Description 3" },
      { id: 4, name: "Name 4", description: "Description 4" },
      { id: 5, name: "Name 5", description: "Description 5" }
    ]}
  />
}

You can see a interative component in Storybook.

Props

TableControl

Name	Type	Default	Description
header	`Header[]`	-	Required. List of header values
sortable	boolean	false	Enable sort action
onClickHeader	`Sort` => any	sort => console.log(sort)	Header click function
sort	`Sort`	{ column: 'id', direction: "ASC" }	Sort direction
itens	`Item[]`	-	Required. List of itens displayed in table
emptyMessage	JSX.Element \| string	"No results"	Message displayed when items equals zero
clikcable	boolean	false	Show clickable action
onClickItem	`Item` => any	item => console.log(item)	Item click function
fillEmptyColumn	boolean	true	Create empty td if item is undefined
total	number	0	Total of itens
totalPosition	"both" \| "top" \| "bottom" \| "none"	"both"	Total itens number
pagination	boolean	true	Show pagination
page	number	1	Active page
limit	number	25	Max itens per page, it's minimum value is `itens` length
between	number	4	Max itens in left and right when `page` is in center, it's minimum value is 1
ellipsis	number	1	Number itens after ellipsis, its maximum value is equal (`between` - 2)
next	boolean	true	Control if prev and next actions will be displayed
last	boolean	false	Control if fist and last actions will be displayed
onClickPage	number => any	page => console.log(page)	Pagination click function
isLoading	boolean	false	Loading status
loadingLines	number	`limit`	Number of lines that will be displayed during loading
tableProps	object	{}	table properties
theadProps	object	{}	thead properties
trProps	object	{}	thead tr properties
tbodyProps	object	{}	tbody properties

Types

Sort

Name	Type	Default	Description
column	string	-	Required. Colum name sort
direction	"ASC" \| "DESC"	-	Sort direction

Header

Name	Type	Default	Description
name	JSX.Element \| string	-	Required. Header name
key	string	-	Required. Key name
sort	boolean	-	Sortable column
thProps	object	-	th properties

Item

Name	Type	Default	Description
trType	"default" \| "blocked" \| "clickable"	When used into TableControl, this value is "default" if `clickable` is false, and "clickable" if `clickable` is true	Type of item action
trProps	object	-	tr properties
key: string	any \| `Td`	-	Column value or Td type for a specific view