Skip to content

A reusable table component in next.js with Tailwind CSS and a simple JS fetch hook to get the API data and dynamically create the table.

Notifications You must be signed in to change notification settings

zimboflyman/react-table-component

Repository files navigation

This is a Next.js project bootstrapped with create-next-app.

Its a reusable table component in React that gets invoice data and builds the table according to the data. It uses Tailwind CSS and a simple JS fetch hook to get the API data. This is for a tech test and has taken me around 4 hours to complete.

Getting Started

  1. clone the main branch locally

In the project root directory,

  1. install dependences by running yarn

  2. run the following in terminal to get around CORS issues - this will open a new chrome window ready for http://localhost:3000 (This gets around CORS issue locally otherwise the api data will not be returned)

    open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

    to solve the CORS issue correctly, we would need to update the server side to configure the backend to allow for Cross origin request

    Another way would be to make proxy server - simmilar to this link https://github.com/Rob--W/cors-anywhere

4.First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with the browser from point 3. to see the result.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

About

A reusable table component in next.js with Tailwind CSS and a simple JS fetch hook to get the API data and dynamically create the table.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published