Advanced React DataTable with Integrated Search and Editing by Muhammad Fikri

This project demonstrates an advanced, reusable React DataTable component built from scratch. It features integrated global search, column sorting, and inline cell editing capabilities. State management is handled efficiently using React Hooks and the Context API, minimizing prop drilling and optimizing performance.

---

✨ Features

• Data Display: Renders data in a structured, sortable table.
• Global Search: A debounced search input filters data across specified fields in real-time.
• Column Sorting: Clickable column headers allow users to sort data in ascending or descending order. Supports string and numeric data types.
• Inline Editing: Double-click to edit a cell. Changes are saved on blur or Enter, and can be canceled with Escape.
• Customizable: Accepts any dataset and lets you define searchable fields.

---

🚀 Performance Optimizations

• React.memo: Prevents unnecessary re-renders of TableRow and TableHeader.
• useMemo: Caches derived data like sorted and filtered arrays.
• useCallback: Stabilizes functions passed as props/context values.
• Debouncing: Limits frequency of filtering during search input.

---

🧩 Modular Design

Custom Hooks

• useTableManager: Central logic for sorting, filtering, editing, and state updates.
• useDebounce: Delays input handling for optimized performance.

Context API

• TableContext: Shares table state/actions across components without prop drilling.

Component Composition

• DataTableComponent
  • DataTableInner
  • TableHeader
  • TableRow
  • GlobalSearchInput

---

🛠 Tech Stack

• React (v17+ or v18+)
• React Hooks: useState, useEffect, useMemo, useCallback, useContext
• Context API
• JavaScript (ES6+)
• CSS3
• No external UI/state libraries

---

🧠 Key Techniques and Patterns

• Custom Hooks: useTableManager, useDebounce
• Controlled Components: Global search and inline inputs are controlled.
• State Colocation: All table state is managed in useTableManager and exposed via Context.
• Dynamic Column Generation: Columns are based on keys from initial data or specified definitions.
• Robust Inline Editing: Uses unique row ID to maintain data integrity through sorting/filtering.

---

📁 Project Structure

src/
├── App.js                 # Main application component
├── App.css                # Global styles
├── constants.js           # Mock data (e.g., movie list)
├── hooks/
│   ├── index.js           # File hooks stored
├── context/
│   └── index.jsx          # React Context for sharing table state
├── components/
│   └── DataTavles.js # Main DataTable component and its sub-components
|   └── DataTable.css          # Styles specific to the DataTable

---

⚙️ How to Use

import DataTableComponent from "./components/DataTableComponent";
import { myDataArray } from "./myData"; // Your data source

function MyPage() {
  return (
    <DataTableComponent
      initialData={myDataArray}
      searchableFields={["name", "category", "description"]}
    />
  );
}

---

📄 License

This project is licensed under the MIT License.