react-sort-search-table

react-sort-search-table

• with fontawesome
• Searchable
• Sortable
• Pager Include
• Use your Custom Component to Render Specific TD
• react >= 16.8.2
• react-dom >= 16.8.2

Live Demo

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

Example

Need more example? See examples

1. Include fontawesome

<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>

1. Use the component

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>
		);
	}
}

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>
);

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>
	);
};

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>
		);
	}
}

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/example2
npm install
npm run dev

Then open localhost:3100 in a browser.

License

MIT