node package manager

react-sort-search-table

react-sort-search-table

npm version Download Count

demo gif

  • 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