React Product List Table with Image and Rating | Display API Data

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.

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:

React Product List in Table Format using DataTable

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 TitleCategoryPriceRating, and Image, and offers built-in features like pagination and sorting.