From 58ba18c81715d86d3d55616cd80e5b3582de249b Mon Sep 17 00:00:00 2001 From: Stephanos Date: Thu, 14 Nov 2024 11:12:50 +0100 Subject: [PATCH] doc: MUI-Tables Documentation --- src/components/tables/mui-tables/data.ts | 3 +- .../tables/mui-tables/tables.stories.tsx | 9 +-- src/components/tables/mui-tables/tables.tsx | 58 ++++++++++--------- 3 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/components/tables/mui-tables/data.ts b/src/components/tables/mui-tables/data.ts index a5b071e..1759fbc 100644 --- a/src/components/tables/mui-tables/data.ts +++ b/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" }, diff --git a/src/components/tables/mui-tables/tables.stories.tsx b/src/components/tables/mui-tables/tables.stories.tsx index a7a3a19..d1e7766 100644 --- a/src/components/tables/mui-tables/tables.stories.tsx +++ b/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 = { title: "Example/Table/MUI Tables", component: MyTable, @@ -41,6 +41,7 @@ const meta: Meta = { export default meta; type Story = StoryObj; +// 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, diff --git a/src/components/tables/mui-tables/tables.tsx b/src/components/tables/mui-tables/tables.tsx index 1278c87..262393f 100644 --- a/src/components/tables/mui-tables/tables.tsx +++ b/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) { + // 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(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) => { 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';