react-sort-search-table

• with Bootstrap style
• Searchable
• Sortable
• Pager Include
• Use your Custom Component to Render Specific TD

Live Demo

Live demo: https://grace951.github.io/react-table/

Example

Need more example? See examples

let MyData = 
[
    {
        "cat": 1,
        "_id": "d-rhe-428-j",
        "imageUrl": "img/products/rhe-428-j.png",
        "name": "RHE-428-J (4ch Compact)",
        "brand": "iCATCH",
        "type":"HD-SDI",
        "channel":4,
        "remote":"LAN, ie, iPhone, iPad, Android, 3G mobile",
        "backup":"USB, Network",
        "videoout":"HDMI, VGA"
    },
    {
        "cat": 1,
        "_id": "srd-482",
        "imageUrl": "img/products/srd-482-2.jpg",
        "name": "SRD-482 (4ch)",
        "brand": "Samsung",
        "type":"HD-SDI",
        "channel":4,
        "remote":"LAN, ie, iPhone, iPad, Android, 3G mobile",
        "backup":"USB, Network",
        "videoout":"HDMI, VGA"
    },
    {
        "cat": 1,
        "_id": "sh3-04u",
        "imageUrl": "img/products/sh3-04u-1.png",
        "name": "SH3-04U (4ch)",
        "brand": "SNM",
        "type":"HD-SDI",
        "channel":4,
        "remote":"LAN, ie, iPhone, iPad, Android, 3G mobile",
        "backup":"USB, Network",
        "videoout":"HDMI, VGA, BNC"
    },
    {
        "cat": 1,
        "_id": "d-rhe-828-j",
        "imageUrl": "img/products/rhe-828-j.png",
        "name": "RHE-828-J (8ch Compact)",
        "brand": "iCATCH",
        "type":"HD-SDI",
        "channel":8,
        "remote":"LAN, ie, iPhone, iPad, Android, 3G mobile",
        "backup":"Network, USB 2.0 or SATA",
        "videoout":"HDMI, VGA, BNC"
    },
]
class BaseProductDeleteComponent extends React.Component{
	constructor(props) {
		super(props);
		this.deleteItem = this.deleteItem.bind(this);
	}
	deleteItem(){
		alert("delete " + this.props.rowData.name);
		console.log(this.props.rowData, this.props.tdData);
	}
	render () {
		return (	
			<td >	
				<input type="button" className="btn btn-danger" value="Delete" onClick={this.deleteItem}/>
			</td>
		);
	}
}

BaseProductDeleteComponent.propTypes = {
	rowData: React.PropTypes.object,
	tdData: React.PropTypes.string,
};




function ProductTblImgpreloader() {
	return <div className="loading-div" style={{minHeight: "100px"}}/>;
}

const TblImageLoader = (props) => (
	<ImageLoader
		src={props.data}
		wrapper={React.DOM.div}
		preloader={ProductTblImgpreloader}>NOT FOUND
	</ImageLoader>);
TblImageLoader.propTypes = {
  data: React.PropTypes.string.isRequired,
};




const BaseProductTblImageComponent = (props) =>
{
	return (
		<td style={{width: '170px', minWidth: '170px', backgroundColor: '#fff'}} >
			<a href={props.rowData.imageUrl} target="_blank">
				<TblImageLoader data={props.rowData.imageUrl}/>
			</a>
		</td>
	);
};

BaseProductTblImageComponent.propTypes = {
	rowData: React.PropTypes.object,
	tdData: React.PropTypes.string,
};




class BaseProductEditComponent extends React.Component{
	constructor(props) {
		super(props);
		this.editItem = this.editItem.bind(this);
	}
	editItem(){
		alert("edit " + this.props.rowData.name);
		console.log(this.props.rowData, this.props.tdData);
	}
	render () {
		return (	
			<td >	
				<input type="button" className="btn btn-warning" value="Edit" onClick={this.editItem}/>
			</td>
		);
	}
}
BaseProductEditComponent.propTypes = {
	rowData: React.PropTypes.object,
	tdData: React.PropTypes.string,
};

const ProductsTblPage = (props) =>{
	let col = [
        "imageUrl",
        "name",
        "brand",
        "type",
        "channel",
        "remote",
        "backup",
        "HDD",
        "videoout",
		"delete", 
		"edit"
	];
	let tHead = [
        "Image",
        "Model",
        "Brand",
        "Type",
        "Channel",
        "Remote",
        "Backup",
        "HDD",
        "Video output",
		"Delete", 
		"Edit"		
	];

	return (
		<SortableTbl tblData={MyData}
			tHead={tHead}
			customTd={[
						{custd: BaseProductTblImageComponent, keyItem: "imageUrl"},
						{custd: BaseProductEditComponent, keyItem: "edit"},
						{custd: BaseProductDeleteComponent, keyItem: "delete"}
						]}
			dKey={col}
		/>
	);
};

ProductsTblPage.propTypes = {
};


ReactDOM.render(<ProductsTblPage/>, document.getElementById("app"));

Props

• tblData: Array
  • Source data of Table
• tHead: Array
  • Table header to be displayed
• paging: boolean, default true
  • show pagine or not
• search: boolean, default true
  • show search bar or not
• defaultCSS: boolean, default true
  • Use Default CSS or not
• customTd: Array
  • Use your Custom Component to Render Specific TD
  • The Custom Component will received 3 props
    • tdData
      • the data corresponds to this column
    • rowData
      • the data array corresponds to this row
    • field
      • the key of data array
• dKey: Array
  • Table column to be displayed

Notes

• Feel free to contribute and or provide feedback!

Build the example locally

git clone https://github.com/Grace951/react-table.git
cd example/example1
npm install
npm run dev

Then open localhost:3000 in a browser.

License

MIT