📡 Consuming Remote API

This example shows how to fetch and display data from a remote API using react-data-grid-lite. It demonstrates how to:

• Dynamically build column definitions from API response keys.
• Transform and format certain columns.
• Exclude or hide unnecessary fields.
• Render the data in a performant, paginated grid.

🔗 API Used

fakerapi.it – Returns fake user data for testing:

GET https://fakerapi.it/api/v1/users?_quantity=100

🧩 Dynamic Column Mapping

Column definitions are generated by inspecting API response keys and applying logic to:

• Rename columns (e.g. firstname → Name)
• Hide redundant columns

This approach is flexible and adapts to schema changes without hardcoding each field.

🚀 Code

import React, { useEffect, useState } from 'react';
import DataGrid, { trackPromise } from 'react-data-grid-lite';

function App() {
    const [users, setUsers] = useState([]);
    const [userColumns, setUserColumns] = useState({});
    useEffect(() => {
        const promise = fetch('https://fakerapi.it/api/v1/users?_quantity=1000')
            .then(response => response.json())
            .then(data => {
                const Columns = Object.keys(data.data[0])
                setUserColumns(Columns.map((val) => {
                    if (val.toLowerCase() === 'id')
                        return { name: val, alias: 'ID', width: '100px' }
                    else if (val.toLowerCase() === 'uuid')
                        return { name: val, alias: 'UUID' }
                    else if (val.toLowerCase() === 'firstname')
                        return { name: val, alias: 'Name' }
                    else return { name: val, hidden: true }
                }));
                setUsers(data.data);
            }).catch(error => { console.error('Error fetching data:', error); });
        trackPromise(promise);
    }, []);

    return (
       <DataGrid columns={userColumns} data={users} pageSize={20} width={"1200px"} />
    )
}

export default App