marleyDip / React-Table-With-Editable-Cells-Tailwind-CSS Public

Notifications You must be signed in to change notification settings
Fork 0
Star 1

A lightweight React table with inline cell editing, search, filtering, add/delete rows, and undo/redo functionality - built entirely without external table libraries.

sofian-react-table-with-editable-cell.netlify.app/

1 star 0 forks Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Repository files navigation

🧩 React Editable Table — Pure React & Tailwind

Build a fully editable data table with React Hooks & Tailwind CSS — no heavy table libraries. Features include inline cell editing, search, filtering, row addition and deletion, and undo / Redo.

✨ Features

✏️ Editable cells (click to edit, Enter to save, Esc to cancel)
🔎 Search across rows
🧰 Column filters
➕ Add row / 🗑️ Delete row
↩️ Undo / Redo recent actions (edit/add/delete)
♿ Keyboard-friendly and responsive UI
🪶 Zero table libs — React hooks & Tailwind

🛠️ Tech Stack

React (hooks, Uncontrolled inputs)
Tailwind CSS
useMemo for filter data (search & select)
UseRef for Edit Value

Project Overview

screencapture-sofian-react-table-with-editable-cell-netlify-app-2025-08-16-02_48_21

screencapture-sofian-react-table-with-editable-cell-netlify-app-2025-08-16-02_49_20

screencapture-sofian-react-table-with-editable-cell-netlify-app-2025-08-16-02_49_57