Table Pagination In React JS

This code project helps you to implement table pagination in React JS using the ReactDataComponents.DataTable component. The code generates random data for a table, including names, cities, and addresses. The main purpose of this code is to display a large dataset in a table format with pagination functionality. It allows the user to navigate through the data by dividing it into multiple pages, improving the performance and user experience when dealing with large amounts of data.

The DataTable component takes in the data, column definitions, and other optional properties to customize the table’s behavior. By incorporating this code into a React application, developers can easily create tables with pagination capabilities, enhancing the presentation and accessibility of data.

How to Create Table Pagination in React JS

1. First, create a div element with an id “root” in which ReactJS renders the table.

<div id="root"></div>

2. Import Bootstrap and Font Awesome CSS by adding the following import rules in your CSS file.

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

3. Load the React JS and React Data Components JS by adding the following CDN links just before closing the body element.

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

4. Finally, add the following React JS code to your project to initialize the data table with pagination, sorting, and search functionality. Replace the random data generation logic with your own data. You can modify the names, cities, and addresses arrays to contain your desired values.

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

That’s all! hopefully, you have successfully integrated table pagination into your project. If you have any questions or suggestions, feel free to comment below.