React Product List Table is a great way to display dynamic product data fetched from APIs in a user-friendly format. In this guide, we’ll learn how to build it step-by-step using React, Axios, and react-data-table-component.
- Axios to fetch data
- react-data-table-component to display the data
- A free API: https://fakestoreapi.com/products
In this post, we’ll build a simple product list table using dummy product data.
🛠️ Step 1: Setup Your React Project
If you haven’t already created a React project, open your terminal and run:
npx create-react-app react-product-table
cd react-product-table
npm install axios react-data-table-component
📁 Step 2: Create Component
ProductListTable.js
Inside your src/ folder, create a new file named ProductListTable.js and paste the following code:
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import DataTable from 'react-data-table-component';
function ProductListTable() {
const [products, setProducts] = useState([]);
useEffect(() => {
axios.get('https://fakestoreapi.com/products')
.then(response => setProducts(response.data))
.catch(error => console.error(error));
}, []);
const columns = [
{
name: 'Title',
selector: row => row.title,
sortable: true,
wrap: true,
},
{
name: 'Category',
selector: row => row.category,
sortable: true,
},
{
name: 'Price',
selector: row => `$${row.price}`,
sortable: true,
},
{
name: 'Rating',
selector: row => `${row.rating.rate} ⭐`,
sortable: true,
},
{
name: 'Image',
cell: row => (
<img src={row.image} alt="product" width={50} height={50} />
),
},
];
return (
<div className="container mt-4">
<h2 className="mb-3">📦 Product Grid</h2>
<DataTable
columns={columns}
data={products}
pagination
highlightOnHover
responsive
/>
</div>
);
}
export default ProductListTable;
🧪 Step 3: Use the Component in App
Update your App.js file:
import React from 'react';
import ProductListTable from './ProductListTable';
function App() {
return (
<div className="App">
<ProductListTable />
</div>
);
}
export default App;
✅ Output Preview
Once you run npm start, you will see a responsive table like this:

In the above screenshot, you can see how the product list is rendered in a neat, interactive table using the react-data-table-component library. It includes columns like Title, Category, Price, Rating, and Image, and offers built-in features like pagination and sorting.
Leave a Reply