⚡ React Tailwind Tables

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

📄 Table of contents

⚡ React Tailwind Tables

📚 General Info

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

📷 Screenshots

📶 Technologies

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

💾 Setup

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 the build 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

💻 Code Examples by CoderOne

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>
				),
			},
		]);
	};

AndrewJBateman/react-tailwind-tables

⚡ React Tailwind Tables

📄 Table of contents

📚 General Info

📷 Screenshots

📶 Technologies

💾 Setup

💻 Code Examples by CoderOne

📋 Status & To-Do List

👏 Inspiration

📁 License

✉️ Contact