meis-custom-table
v1.0.1
Published
React custom table
Downloads
4
Maintainers
Readme
table props:
- isLoading: true/false => need to add skeleton
- emptyContainer: { text: string / component overlay: component }
- data: array
- pagination: { perPage: number currentPage: number totalRecords: number onChangePage: funtion }
- customHeader: component -> done
- topBar: { -> all done title: string / component isShowDefaultSearch: true / false placeholder: string onChangeSearch: funtion defaultSearchValue: string, }
- select : { isShowHeaderCheckBox: true / false isShowView : true / false viewText: string actions: array => {title : string / component, action: function} checkBoxField: field name from each row default id search: { placeholder: 'Search contact', onChange: function, defaultValue: search } }
- rowDecoration: array => title=> string / component, value => function, minWidth: '100px'
- tableWrapperclass: string -> done
- renderPagination: component
demo <MEISCustomTable tableWrapperclass="campaign_report" isLoading={true} data={[ {firstName: 'first', value: 101, email: '[email protected]', number: '123412343' }, {firstName: 'first 2', value: 102, email: '[email protected]', number: '12341452343' }, {firstName: 'first 3', value: 103, email: '[email protected]', number: '149412343' }, {firstName: 'first 4', value: 104, email: '[email protected]', number: '1234154543' }, ]} customHeader={(Here custom here will be added)} topBar={{ title: 'Table title', isShowDefaultSearch: true, placeholder: 'Search contact', onChangeSearch: (e) => {console.log(e)}, defaultSearchValue: '017' }} select={{ isShowHeaderCheckBox: true, onChangeCheckBox: (e) => {console.log(e)}, isShowView:true, viewText: " contact (s) selected !", actions: [ {title: 'Move', action: (e) => {console.log(e)}}, {title: (Delete), action: (e) => {console.log(e)}}, ], checkBoxField: 'value' //default will id }} pagination={{ perPage:10, currentPage: 2, totalRecords: 135, onChangePage: (e) => {console.log(e)} }} renderPagination={(Custom pagination will be render here)} rowDecoration={[ {title: 'Name', value: (row) => {return row.firstName}}, {title: 'Email', value: (row) => {return row.email}}, {title: 'Number', value: (row) => {return row.number},} ]} emptyContainer={{ text: "No contact available !", overlay: (Add more) }} />