andrewjbateman / react-tailwind-tables

:clipboard: A React app using react-tables to display REST API data

⚡ 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
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

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

📋 Status & To-Do List

• Status: Working
• To-Do: Change REST API and try different tw styles. Add testing

👏 Inspiration

• CoderOne: React Tables From Zero to Hero
• Tailwindcss: Install Tailwind CSS with Create React App
• React Table Quick Start

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]