react-custom-datatable
A React Component to create a custom 'table' similar to the very known jquery datatable.
Features of react-datatable
- Default theme
- Hide and show columns
- Hide row
- Order ascending and descending
- Set initial order
- Customize headers
- Customize items
- Endline render
- Row Click
- Row Expand
- Select rows
- Set selected row (e.g.: for keyboard navigation feature)
- Endless scroll
- Sticky header
Getting started
npm install react-custom-datatable --save
CSS
To use the default theme you have to import the .less in your main .less file
Or
Use the generated .css file
Props
columns
: an array that contains the info needed by the component to build the tableitems
: array of items used to fill the tableendlineRenders
: an array of renders to be printed at the end of the rowrowActive
: set the row active (index)initialSortProp
: property to initially sort itemspageStart
: value of items rendered on each scroll that reaches bottomuseWindow
: used when using endless scroll, to tell if the scroll is relative to window (default:true
)topOffset
: int to indicate distance of header to top (in px) when stickydisableSticky
: disable Sticky header (default:false
)useShowHideColumns
: enable show/hide columns (defaul:false
)searchProps
: properties to be used by the search (setting it enables the search box)renderRowExpand
: it enables to click in a row and show the provided renderonClickRow
: method to be called when user clicks on a row (ifrenderRowExpand
is not defined)enableCheck
: enable select rowsonSelectedItemsChange
: callback when user selects a rowhiddenRow
: a method to return a boolean indicating if a row needs to be hidden
Examples
Basic Example
This is the basic usage of react-custom-datatable
{ super; thisstate = products: reference: '3144141' name: 'ball' reference: '3144123' name: 'watch' columns: name: 'REF.' property: 'reference' style: width: '50%' name: 'PRODUCT' property: 'name' style: width: '50%' } { return <Table id="table-products" ref="table-products" columns=thisstatecolumns items=thisstateproducts pageStart=30 useWindow=true /> ; }
Render items, headers and endlineRenders
You can render custom headers and items by following:
{ super; thisstate = products: reference: '3144141' name: 'ball' reference: '3144123' name: 'watch' columns: name: 'REF.' property: 'reference' style: width: '50%' { let row = groupitemreference || {}; return <div> <Image url=ImageUtil classes='product-img' /> itemreference </div> ; } name: 'PRODUCT' property: 'name' style: width: '50%' { return <div style=display: 'inline-block'> PRODUCT - FROM STORE StoreUtil </div> ; } endlineRenders: { let store = thisstatedistributioncalculoindex; return storemovimenta_estoque ? null : <div key=index className="check-badge" data-toggle="popover" data-placement="top" data-trigger="hover" title="" data-original-title="Sem pedido de movimentação" style=background: 'transparent' fontSize: 16> <i className="mdi mdi-alert-triangle c-orange"></i> </div> ; } } { return <Table id="table-products" ref="table-products" columns=thisstatecolumns items=thisstateproducts pageStart=30 endlineRenders=thisstateendlineRenders useWindow=true /> ; }
Using props
Here you can get an example of some props used by react-custom-datatable
{ return <Table id="table-products" ref="table-products" columns=thisstatecolumns items=thisstateproducts pageStart=30 endlineRenders=thisstateendlineRenders useWindow=true rowActive=2 initialSortProp='source_store' useShowHideColumns=true searchProps='name' 'reference' enableCheck=true topOffset=60 disableSticky=true /> ; }
Expanding a row
You can define a render that will be printed below a row when user clicks on it by doing the following:
{ return <div> Some text </div> } { return <Table id="table-products" ref="table-products" columns=thisstatecolumns items=thisstateproducts pageStart=30 useWindow=true renderRowExpand=thisrenderRowExpand /> ; }
Enabling row click
Define a method that will called when user clicks on a row
{ this; } { return <Table id="table-products" ref="table-products" columns=thisstatecolumns items=thisstateproducts pageStart=30 useWindow=true onClickRow=thisopenModal /> ; }
Selected items
When enabling check on items, you can get an array of the items selected:
{ this;} { return <Table id="table-products" ref="table-products" columns=thisstatecolumns items=thisstateproducts pageStart=30 useWindow=true onSelectedItemsChange=thisonSelectedProductsChange /> ; }