Skip to content

sashiksu/react-table-it

 
 

Repository files navigation

React Table It

Logo

CircleCI Test Coverage Maintainability

Data table component with React

Installation

$ npm i @emp/reactable

or

$ yarn add @emp/reactable

Usage

import Table from '@empd/reactable';
import '@empd/reactable/lib/styles.css';

Props

Props Required Description Type Default
data - Data to load on table [] []
columns - Table column settings array of objects
Object contains some/ all properties below
name: string or element (required)
className: string
attributes: Object of html attributes
selector: string
sortable: boolean
unsearchable: boolean
cell: element or function function passes current row data and returns element
[]
emptyPlaceholder - Data to load on table [] []
dataLength - Specify length of all data when loading from server. Note: server props must true [] []
emptyPlaceholder - Placeholder when table is empty. `string element`
pageOptions - Data to load on table array of numbers [10, 30, 50]
server - Set if pagination is handled by asynchronously boolean false
customPagination - Render custom pagination boolean false
paginationComponent - Custom pagination component function undefined
paginationPosition - Position of pagination component One of ['top', 'bottom', 'both', 'none'] 'top'
onPageChange - Custom page change function function with params (offset, limit, searchValue)
Note: server props must true
-
onSort - Custom sort function function with params (selector/key, ascending(boolean)) undefined
searchPlaceholder - Search box placeholder string 'Search'
search - Set visibility of search box boolean true
containerClass - CSS class for package component string ''
tableClass - CSS class for table string ''
headerClass - CSS class for table header string ''
rowClass - CSS class for table row string ''
header - Custom header component element null
footer - Custom footer component element null

Technology

Table It uses a number of open source projects to work properly:

  • [ReactJS] - HTML enhanced for web apps!
  • [Bootstrap] - great UI boilerplate for modern web apps
  • [Storybook] - great UI docs

Development

Want to contribute? Great!

We use Webpack for fast developing. Make a change in your file and instantanously see your updates!

Open your favorite Terminal and run these commands.

Install dependenies: $ yarn

Start application:$ yarn start

Ensure the tests are stable with good coverage: $ yarn test

Ensure the test have good coverage: $ yarn test:coverage

(optional) Run storybook: $ yarn storybook

License

MIT

About

Simple data-table component with React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 95.5%
  • CSS 3.7%
  • HTML 0.8%