Remove @mui, move states into zustand store

client/src/components/CustomTable.tsx

@@ -4,29 +4,34 @@ import { useMemo, useState } from 'react';
 import styles from './CustomTable.module.scss'
 
 // Sample data
-const initialData = [
-    { id: 1, name: 'John Doe', age: 25 },
-    { id: 2, name: 'Jane Smith', age: 30 },
-    { id: 3, name: 'Sam Green', age: 22 },
-];
+
+type DataType = {
+    id: number,
+    name: string,
+    age: number
+}
 
 // Define columns
-const columns: ColumnDef<typeof initialData[0]>[] = [
+const columns: ColumnDef<DataType>[] = [
     {
         accessorKey: 'name',
         header: 'Name',
-        cell: (info: any) => info.getValue(),
+        cell: (info) => info.getValue(),
         maxSize: Number.MAX_SAFE_INTEGER,
     },
     {
         accessorKey: 'age',
         header: 'Age',
-        cell: (info: any) => info.getValue(),
+        cell: (info) => info.getValue(),
     },
 ];
 
 const CustomTable = () => {
-    const [data, setData] = useState(initialData);
+    const [data, setData] = useState<DataType[]>([
+        { id: 1, name: 'John Doe', age: 25 },
+        { id: 2, name: 'Jane Smith', age: 30 },
+        { id: 3, name: 'Sam Green', age: 22 },
+    ]);
     const [editingCell, setEditingCell] = useState({ rowIndex: null, columnId: null });
 
     const tableColumns = useMemo<ColumnDef<typeof data[0]>[]>(() => columns, []);
@@ -39,7 +44,11 @@ const CustomTable = () => {
     });
 
     // Function to handle cell edit
-    const handleEditCell = (rowIndex: any, columnId: any, value: any) => {
+    const handleEditCell = (
+        rowIndex: number,
+        columnId: keyof DataType,
+        value: DataType[keyof DataType]
+    ) => {
         const updatedData = [...data];
         updatedData[rowIndex][columnId] = value;
         setData(updatedData);