- A React app using react-tables to display REST API data
- Code from CoderOne with modifications to styling
- Note: to open web links in a new window use: ctrl+click on link
- Fake Store API provides data for e-commerce or shopping website prototypes
- React Hooks used so state etc. can be used without writing a class
- React Table useTable root hook used
- Table is not responsive - set up for PC screen size
- Table Edit buttons do not edit anything, they just create an alert
- Yarn used instead of npm for this project
- React v17 Javascript library.
- Tailwind v2 utility-first CSS framework
- twin.macro v2 to mix Tailwind with css-in-js
- @craco/craco v6 Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app. Required because Create React App doesn’t let you override the PostCSS configuration natively
- PostCSS v8 tool for transforming CSS with JavaScript
- react-table v7 Hooks for building lightweight, fast and extendable datagrids for React
- axios v0.21.4 Promise based HTTP client for the browser and node.js
- Fake Store API for testing of e-commerce or shopping website prototype
- Thunderclient VSCode extension Rest Client for Testing APIs
yarn start
runs the app in the development mode. Open http://localhost:3000 to view it in the browser.yarn build
builds the app for production to thebuild
folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.yarn test
to run testing - no tests added, testing fails
- function const to define table using spread operator and add edit column
const tableHooks = (hooks) => {
hooks.visibleColumns.push((columns) => [
...columns,
{
id: "Edit",
Header: "Edit",
Cell: ({ row }) => (
<Button onClick={() => alert("Editing: " + row.values.price)}>
Edit
</Button>
),
},
]);
};
- Status: Working
- To-Do: Change REST API and try different tw styles. Add testing
- CoderOne: React Tables From Zero to Hero
- Tailwindcss: Install Tailwind CSS with Create React App
- React Table Quick Start
- N/A
- Repo created by ABateman, email: gomezbateman@yahoo.com