React-TBL

A lightweight & easy to use react table implementation.

Getting Started [Installation]

To install react-tbl use the following command

npm i react-tbl

Package Demo

Usage

To use react-tbl in your app:

import ReactTBL from 'react-tbl';

const App = () => {
	const tblData = [
		{
			id: 1,
			name: 'moses',
			state: true,
		},
		{
			id: 2,
			name: 'hoyas',
			state: true,
		},
	];
	const tblColumns = [
		{
			header: 'User Id',
			colKey: 'id',
			size: 1,
		},
		{
			header: 'User Name',
			colKey: 'name',
			size: 4,
			copyCellDataOnClick: true,
			showToolTip: true,
		},
		{
			header: 'User State',
			colKey: 'state',
			size: 2,
			sortable: false,
			CustomCell: ({ dataRow, currentKey, currentValue }) => (
				<input
					className='customInputCell'
					value={currentValue.toString()}
					readOnly
				/>
			),
		},
	];
	return <ReactTBL data={tblData} columns={tblColumns} />;
};

Props Example

    <ReactTBL
        data = {currentData}
        columns = {columnsData}
        className = "custom_class_name"              // [optional]
        defaultPageSize = {10}                       // [optional] - default = 12
        copyCellDataOnClick = {true}                 // [optional]
        showPagination = {true}                      // default = true
        showToolTip = {true}                         // default = false
        sortable = {true}                            // default = true
        columnsResize = {true}                       // default = false
        isLoading = {true}                           // shows loader
        CustomLoader = {Loader}                      // custom loader component [optional]
        resize = {true}                              // default = false
        style = {{                                   // custom style [optional]
           maxWidth: '250px',
           minHeight: '400pt',
           maxHeight: '50px',
           minWidth: 'auto',
           rowBGColor: 'yellow',
           textColor: 'red',
           columnMinWidth: '100px',                     // = 100 px
           fontFamily: 'arial',

          header: {
            headerColor: '#fff',
            headerBGColor: '#333',
            fontSize: '11pt',
            borderColor: '#000',
            sortSign: '^',
          },

          body:{
            maxHeight: '150px',
            minHeight: '200pt',
            tooltipTextColor: '#555',
            tooltipBorderColor: 'yellow',
            tooltipBgColor: 'green'
            backgroundColor: 'yellow',
            borderColor: 'yellow',
            fontSize: '12pt',
          },

          pagination: {
            color: '#fff',
            borderColor: '#000',
            backgroundColor: '#333',
            btnsBGColor: '#000',
            prevButtonText: null,
            nextButtonText: 'Next >'
          },
        }}
    />
}

Columns [Array of columns objects]

[
    {
        header: 'User Id',          // header label [String]
        colKey: 'id',               // key accessor [String]
        size: 1,                    // column width [Number]
        showToolTip: true           // show tool tip for specific cell
        sortable: false,            // in order to cancel sort option for specific column
        copyCellDataOnClick: true,  // enable/disable 'copy cell's data' on specific column
        CustomCell: function({ dataRow, currentKey,currentValue,pageData,setPageData })
    }
]

Data [Array of data]

[
	{
		id: 1,
		name: 'Moses',
		state: true,
	},
	{
		id: 2,
		name: 'Hoyas',
		state: false,
	},
];

Table props

| General | Default | | :-----------------: | :-----: | | data | | | columns | | | className | | | defaultPageSize | 12 | | sortable | true | | copyCellDataOnClick | false | | showPagination | true | | showToolTip | false | shows tool tip for each cell | | style | | | isLoading | | shows loader when is loading = true | | CustomLoader | | custom loader component | | columnsResize | false | | resize | true |

Table style

| General | Default | | :------------: | :----------: | | maxHeight | 300px | | minHeight | 100px | | maxWidth | 40vw | | minWidth | auto | | border | 1px solid | | rowBGColor | #f7f7f7/#eee | | textColor | #000 | | columnMinWidth | 100px | | overflowX | auto | | overflowY | auto | | fontFamily | monospace |

Header, Body, Pagination

| Header | Default | Body | Default | Pagination | Default | | :-----------: | :-----: | :----------------: | :-----: | :-------------: | :------: | | headerColor | #fff | maxHeight | 200px | color | #fff | | headerBGColor | #333 | minHeight | auto | backgroundColor | #333 | | borderColor | #000 | cellPadding | 4pt | btnsBGColor | #333 | | fontSize | 12pt | tooltipTextColor | #000 | btnsColor | #fff | | sortSign | ↑ | tooltipBorderColor | #000 | prevButtonText | Previous | | | | tooltipBgColor | #f7f7f7 | nextButtonText | Next | | | | backgroundColor | #333 | border | none | | | | borderColor | #eaeaeb | | | | | | fontSize | 10pt | | | | | | rowHeight | 30px | | |

User table custom STYLE

{
    minHeight:      '120px',
    maxWidth:       '450px',
    maxHeight:      '120px',
    minWidth:       '800px',
    rowBGColor:     '#000' ,
    textColor:      '#000' ,
    columnMinWidth: '100px',
    overflowX: 'auto',
    fontFamily: 'monospace',
    header: {
        headerColor: '#fff',
        headerBGColor: '#333',
        fontSize: '11pt',
        borderColor: '#333',
        sortSign: '^'
    },
    body:{
        maxHeight: 'auto',
        tooltipTextColor: '#555',
        tooltipBorderColor: 'yellow',
        tooltipBgColor: 'green'
    },
    pagination: {
        color: '#fff',
        backgroundColor: '#333',
        borderColor: '#000',
        btnsBGColor: '#000',
        btnsColor: '#fff',
        prevButtonText: null,
        nextButtonText: 'Next >'
    },
}