doc: MUI-Tables Documentation

src/components/tables/mui-tables/data.ts

@@ -1,3 +1,4 @@
+// Table data
 export const data = [
     { Name: "Alice", Age: 25, Country: "USA", Occupation: "Engineer", Company: "TechCorp", Department: "R&D", Salary: "$100,000", Experience: "5 years", Education: "MSc", Skills: "React, Node.js", Projects: "Project A" },
     { Name: "Bob", Age: 30, Country: "Canada", Occupation: "Designer", Company: "DesignStudio", Department: "Design", Salary: "$90,000", Experience: "7 years", Education: "BDes", Skills: "Photoshop, Illustrator", Projects: "Project B" },
@@ -26,7 +27,7 @@ export const data = [
     { Name: "Yara", Age: 27, Country: "Egypt", Occupation: "Archaeologist", Company: "HistoryMuseum", Department: "Archaeology", Salary: "$90,000", Experience: "6 years", Education: "MA", Skills: "Excavation, Research", Projects: "Project Y" },
     { Name: "Zane", Age: 28, Country: "Argentina", Occupation: "Economist", Company: "FinanceGroup", Department: "Economics", Salary: "$100,000", Experience: "7 years", Education: "PhD", Skills: "Economic Analysis, Forecasting", Projects: "Project Z" },
   ];
-
+  // Table headers
   export const headers = [
     { id: "Name", label: "Name" },
     { id: "Age", label: "Age" },

src/components/tables/mui-tables/tables.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import MyTable from "./tables";
 import {data,headers} from "./data"
 
-
+// Meta configuration for the MUI Tables stories
 const meta: Meta<typeof MyTable> = {
   title: "Example/Table/MUI Tables",
   component: MyTable,
@@ -41,6 +41,7 @@ const meta: Meta<typeof MyTable> = {
 export default meta;
 type Story = StoryObj<typeof MyTable>;
 
+// Default MUI Table story
 export const DefaultTable: Story = {
   args: {
     data,
@@ -56,7 +57,7 @@ export const DefaultTable: Story = {
     componentBoxShadow: 'none',
   },
 };
-
+// MUI Table story with custom styles to messs around with
 export const CustomStyledTable: Story = {
   args: {
     data,
@@ -73,7 +74,7 @@ export const CustomStyledTable: Story = {
     componentBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
   },
 };
-
+// MUI Table story with Pagination
 export const PaginatedTable: Story = {
   args: {
     data,
@@ -92,7 +93,7 @@ export const PaginatedTable: Story = {
     onSortChange: (columnId, direction) => console.log('Sort changed:', columnId, direction),
   },
 };
-
+// Mui OpenAidActivitiesTable story
 export const OpenAidActivitiesTable: Story = {
   args: {
     data,

src/components/tables/mui-tables/tables.tsx

@@ -15,20 +15,22 @@ import { TableProps as MuiTableProps } from "@mui/material/Table";
 import { fn } from "@storybook/test";
 import orderBy from 'lodash/orderBy';
 
+// Table header props
 interface Header {
-  id:string;
-  label:string;
+  id: string; // Unique identifier for the header
+  label: string; // Display label for the header
 }
 
+// Interface for container props
 interface ContainerProps {
-  componentWidth?: string;
-  componentOverflow?: string;
-  componentPadding?: string;
-  componentBorderRadius?: string;
-  componentBackground?: string;
-  componentBoxShadow?: string;
+  componentWidth?: string; // Width of the table container
+  componentOverflow?: string; // Overflow property of the table container
+  componentPadding?: string; // Padding of the table container
+  componentBorderRadius?: string; // Border radius of the table container
+  componentBackground?: string; // Background color of the table container
+  componentBoxShadow?: string; // Box shadow of the table container
 }
-
+// Interface for Table Header props
 interface TableHeadProps {
   headCursor?: string;
   headFontWeight?: string;
@@ -37,13 +39,12 @@ interface TableHeadProps {
   headPosition?: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
   headColor?: string;
 }
-
+// Interface for Table Body props
 interface TableBodyProps {
-  bodyColor?: string;
+  bodyColor?: string; // Body color of the table body
 }
-
+// Interface for Pagination props
 interface PaginationProps{
-
 pagination?: boolean;
 page?: number;
 rowsPerPage?: number;
@@ -59,22 +60,21 @@ paginationBorderStyle?: string;
 paginationPadding?: string;
 paginationJustifyContent?: string;
 paginationToolbarMarginLeft?: string;
-
 }
 
-
-
+// Interface for Table props
 interface TableProps extends MuiTableProps,ContainerProps,PaginationProps,TableHeadProps,TableBodyProps {
-    data: Array<{ [key: string]: string | number }>;
-    headers: Header[];
-    rowHeight?: number;
-    borderColor?: string;
-    hover?: boolean;
-    hoverColor?:string;
-    sortIndicatorColor?:string,
-    minWidth?:string
+    data: Array<{ [key: string]: string | number }>;// Array of table data
+    headers: Header[];// Array of table headers
+    rowHeight?: number;// Height of the table rows
+    borderColor?: string; // Border color of the table
+    hover?: boolean; // Whether to enable row hover effect
+    hoverColor?:string; // Background color of rows on hover
+    sortIndicatorColor?:string, // Color of the sort indicator
+    minWidth?:string // Min width of the table
 }
 
+// Table component
 export default function MyTable({
     data,
     headers,
@@ -114,22 +114,26 @@ export default function MyTable({
     minWidth='1500px',
     ...otherProps
   }: Readonly<TableProps>) {
+      // State for pagination
     const [currentPage,setCurrentPage]=React.useState(page||0);
+    // State for the current number of rows per page
     const [currentRowsPerPage,setCurrentRowsPerPage]=React.useState(rowsPerPage||10);
+    // State for the current sort key
     const [currentSortKey, setCurrentSortKey] = React.useState<string | undefined>(sortKey);
+    // State for the current sort direction
     const [currentSortDirection, setCurrentSortDirection] = React.useState<'asc' | 'desc' | undefined>(sortDirection);
 
-
+    // Handle page change
     const handlePageChange=(event:unknown,newPage:number)=>{
        setCurrentPage(newPage);
        if (onPageChange) onPageChange(newPage);
      };
-
+    // Handle rows per page change
      const handleRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       setCurrentRowsPerPage(parseInt(event.target.value, 10));
       setCurrentPage(0);
     };
-
+    // Handle sort change
     const handleSortChange = (columnId: string) => {
       const isAsc = currentSortKey === columnId && currentSortDirection === 'asc';
       const direction = isAsc ? 'desc' : 'asc';