React.js Data Table Using Pagination and Search in Javascript complete Project

Welcome Learner today in this blog post we will be Using React.js Data Table using Pagination and Search in Javascript. All the Complete source code of the application is shown Down.

 

In order to lets started, you need to make a file index.html and copy-paste the mentioned code.

index.html 

<div id="root"></div>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://npmcdn.com/react-data-components@1.0.1/dist/react-data-components.min.js"></script>

And now create a style.css file and copy-paste the Given code.

style.css 

 

@import url(https://cdn.rawgit.com/carlosrocha/react-data-components/v1.0.0/css/table-twbs.css);
 @import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css);
 @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css);

READ React.js Axios Demo to Make HTTP Get Call to Get Random Image in Javascript complete Project For learner

And now create a script.js file and copy-paste the Given code.

script.js 

 

 

"use strict";

var DataTable = ReactDataComponents.DataTable; // Generate random data

var names = ['Carlos', 'Juan', 'Jesus', 'Alberto', 'John'];
var cities = ['Chicago', 'Tampico', 'San Francisco', 'Mexico City', 'Boston', 'New York'];
var addresses = ['333 West Wacker Drive', '1931 Insurgentes Sur', '1 Lombard Street', '55 Av Hidalgo'];
var data = [];

for (var i = 0; i < 1000; i++) {
  data.push({
    id: i,
    name: names[~~(Math.random() * names.length)],
    city: cities[~~(Math.random() * cities.length)],
    address: addresses[~~(Math.random() * addresses.length)]
  });
}

var columns = [{
  title: 'Name',
  prop: 'name'
}, {
  title: 'City',
  prop: 'city'
}, {
  title: 'Address',
  prop: 'address'
}];
ReactDOM.render( /*#__PURE__*/React.createElement(DataTable // className="container"
, {
  keys: "id",
  columns: columns,
  initialData: data // initialPageLength={5}
  // initialSortBy={{ prop: 'city', order: 'descending' }}
  // pageLengthOptions={[ 5, 20, 50 ]}

}), document.getElementById("root"));

Leave a Comment

Your email address will not be published. Required fields are marked *