feat: Mui Table

Table Component file, Table Stories file , index file and data file

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

@@ -0,0 +1,42 @@
+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" },
+    { Name: "Charlie", Age: 35, Country: "UK", Occupation: "Manager", Company: "BusinessInc", Department: "Management", Salary: "$120,000", Experience: "10 years", Education: "MBA", Skills: "Leadership, Strategy", Projects: "Project C" },
+    { Name: "David", Age: 28, Country: "Australia", Occupation: "Developer", Company: "DevWorks", Department: "Development", Salary: "$110,000", Experience: "6 years", Education: "BSc", Skills: "Java, Spring", Projects: "Project D" },
+    { Name: "Eve", Age: 22, Country: "Germany", Occupation: "Intern", Company: "InternshipCo", Department: "Internship", Salary: "$50,000", Experience: "1 year", Education: "BSc", Skills: "Python, Data Analysis", Projects: "Project E" },
+    { Name: "Frank", Age: 40, Country: "France", Occupation: "CEO", Company: "BigCorp", Department: "Executive", Salary: "$200,000", Experience: "15 years", Education: "PhD", Skills: "Management, Strategy", Projects: "Project F" },
+    { Name: "Grace", Age: 29, Country: "Japan", Occupation: "Researcher", Company: "ResearchLab", Department: "Research", Salary: "$95,000", Experience: "7 years", Education: "PhD", Skills: "Data Science, Machine Learning", Projects: "Project G" },
+    { Name: "Hank", Age: 33, Country: "China", Occupation: "Analyst", Company: "AnalyticsLtd", Department: "Analytics", Salary: "$85,000", Experience: "8 years", Education: "MSc", Skills: "Data Analysis, SQL", Projects: "Project H" },
+    { Name: "Ivy", Age: 27, Country: "India", Occupation: "Consultant", Company: "ConsultingGroup", Department: "Consulting", Salary: "$105,000", Experience: "5 years", Education: "MBA", Skills: "Consulting, Strategy", Projects: "Project I" },
+    { Name: "Jack", Age: 31, Country: "Brazil", Occupation: "Architect", Company: "ArchitectureFirm", Department: "Architecture", Salary: "$115,000", Experience: "9 years", Education: "MArch", Skills: "Design, CAD", Projects: "Project J" },
+    { Name: "Karen", Age: 26, Country: "South Korea", Occupation: "Teacher", Company: "EducationFirst", Department: "Education", Salary: "$70,000", Experience: "4 years", Education: "MEd", Skills: "Teaching, Curriculum Development", Projects: "Project K" },
+    { Name: "Leo", Age: 34, Country: "Italy", Occupation: "Chef", Company: "GourmetKitchen", Department: "Culinary", Salary: "$95,000", Experience: "12 years", Education: "Culinary Arts", Skills: "Cooking, Menu Development", Projects: "Project L" },
+    { Name: "Mona", Age: 29, Country: "Spain", Occupation: "Artist", Company: "ArtGallery", Department: "Art", Salary: "$80,000", Experience: "6 years", Education: "BFA", Skills: "Painting, Sculpture", Projects: "Project M" },
+    { Name: "Nina", Age: 32, Country: "Russia", Occupation: "Scientist", Company: "ResearchInstitute", Department: "Science", Salary: "$110,000", Experience: "10 years", Education: "PhD", Skills: "Research, Experimentation", Projects: "Project N" },
+    { Name: "Oscar", Age: 27, Country: "Mexico", Occupation: "Lawyer", Company: "LegalFirm", Department: "Legal", Salary: "$130,000", Experience: "5 years", Education: "JD", Skills: "Litigation, Contract Law", Projects: "Project O" },
+    { Name: "Paul", Age: 36, Country: "Netherlands", Occupation: "Photographer", Company: "PhotoStudio", Department: "Photography", Salary: "$75,000", Experience: "15 years", Education: "BFA", Skills: "Photography, Editing", Projects: "Project P" },
+    { Name: "Quincy", Age: 24, Country: "South Africa", Occupation: "Journalist", Company: "NewsCorp", Department: "Journalism", Salary: "$65,000", Experience: "3 years", Education: "BA", Skills: "Writing, Reporting", Projects: "Project Q" },
+    { Name: "Rachel", Age: 28, Country: "Israel", Occupation: "Doctor", Company: "HealthCare", Department: "Medical", Salary: "$150,000", Experience: "6 years", Education: "MD", Skills: "Medicine, Surgery", Projects: "Project R" },
+    { Name: "Sam", Age: 31, Country: "New Zealand", Occupation: "Pilot", Company: "Airways", Department: "Aviation", Salary: "$140,000", Experience: "10 years", Education: "BSc", Skills: "Flying, Navigation", Projects: "Project S" },
+    { Name: "Tina", Age: 30, Country: "Sweden", Occupation: "Nurse", Company: "Hospital", Department: "Nursing", Salary: "$80,000", Experience: "8 years", Education: "BSN", Skills: "Patient Care, Medication Administration", Projects: "Project T" },
+    { Name: "Uma", Age: 33, Country: "Norway", Occupation: "Engineer", Company: "TechSolutions", Department: "Engineering", Salary: "$120,000", Experience: "10 years", Education: "MEng", Skills: "Engineering, Project Management", Projects: "Project U" },
+    { Name: "Victor", Age: 29, Country: "Finland", Occupation: "Developer", Company: "CodeFactory", Department: "Development", Salary: "$110,000", Experience: "7 years", Education: "BSc", Skills: "JavaScript, React", Projects: "Project V" },
+    { Name: "Wendy", Age: 35, Country: "Denmark", Occupation: "Architect", Company: "DesignBuild", Department: "Architecture", Salary: "$115,000", Experience: "12 years", Education: "MArch", Skills: "Design, CAD", Projects: "Project W" },
+    { Name: "Xander", Age: 26, Country: "Belgium", Occupation: "Musician", Company: "MusicStudio", Department: "Music", Salary: "$70,000", Experience: "5 years", Education: "BMus", Skills: "Music Production, Performance", Projects: "Project X" },
+    { 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" },
+  ];
+
+  export const headers = [
+    { id: "Name", label: "Name" },
+    { id: "Age", label: "Age" },
+    { id: "Country", label: "Country" },
+    { id: "Occupation", label: "Occupation" },
+    { id: "Company", label: "Company" },
+    { id: "Department", label: "Department" },
+    { id: "Salary", label: "Salary" },
+    { id: "Experience", label: "Experience" },
+    { id: "Education", label: "Education" },
+    { id: "Skills", label: "Skills" },
+    { id: "Projects", label: "Projects" },
+  ];

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

@@ -0,0 +1 @@
+export { default as MyTable } from './tables';

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

@@ -0,0 +1,129 @@
+// Table.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import MyTable from "./tables";
+import {data,headers} from "./data"
+
+
+const meta: Meta<typeof MyTable> = {
+  title: "Example/Table/MUI Tables",
+  component: MyTable,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    borderColor: { control: "color" },
+    rowHeight: { control: { type: "number" } },
+    hover: { control: "boolean" },
+    hoverColor: { control: "color" },
+    sortIndicatorColor: { control: "color" },
+    componentPadding: { control: "text" },
+    componentBorderRadius: { control: "text" },
+    componentBackground: { control: "color" },
+    componentBoxShadow: { control: "text" },
+    headCursor: { control: "text" },
+    headFontWeight: { control: "text" },
+    headTextWrap: { control: "text" },
+    headBorderStyle: { control: "text" },
+    headPosition: { control: "text" },
+    headColor: { control: "color" },
+    bodyColor: { control: "color" },
+    paginationDisplay: { control: "text" },
+    paginationBorderStyle: { control: "text" },
+    paginationPadding: { control: "text" },
+    paginationJustifyContent: { control: "text" },
+    paginationToolbarMarginLeft: { control: "text" },
+    minWidth:{control:"text"},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MyTable>;
+
+export const DefaultTable: Story = {
+  args: {
+    data,
+    headers,
+    rowHeight: 50,
+    borderColor: 'grey',
+    hover: true,
+    hoverColor: 'rgba(0, 0, 0, 0.1)',
+    sortIndicatorColor: 'black',
+    componentPadding: '10px 16px',
+    componentBorderRadius: '4px',
+    componentBackground: '#fff',
+    componentBoxShadow: 'none',
+  },
+};
+
+export const CustomStyledTable: Story = {
+  args: {
+    data,
+    headers,
+    rowHeight: 60,
+    borderColor: 'blue',
+    hover: true,
+    hoverColor: 'rgba(0, 0, 255, 0.1)',
+    sortable:true,
+    sortIndicatorColor: 'red',
+    componentPadding: '20px',
+    componentBorderRadius: '10px',
+    componentBackground: '#f0f0f0',
+    componentBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+  },
+};
+
+export const PaginatedTable: Story = {
+  args: {
+    data,
+    headers,
+    pagination: true,
+    rowsPerPage: 2,
+    sortable: true,
+    sortKey: 'Age',
+    sortDirection: 'desc',
+    paginationDisplay: 'flex',
+    paginationBorderStyle: 'none',
+    paginationPadding: '10px 16px',
+    paginationJustifyContent: 'flex-start',
+    paginationToolbarMarginLeft: '0',
+    onPageChange: (page) => console.log('Page changed to:', page),
+    onSortChange: (columnId, direction) => console.log('Sort changed:', columnId, direction),
+  },
+};
+
+export const OpenAidActivitiesTable: Story = {
+  args: {
+    data,
+    headers,
+    sortable: true,
+    onSortChange: (columnId, direction) => console.log('Sort changed:', columnId, direction),
+    componentWidth: "100%",
+    componentOverflow: "hidden",
+    componentPadding: "10px 16px",
+    componentBorderRadius: "10px",
+    componentBackground: "#F8F8F8",
+    componentBoxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
+    borderColor: "#ECF1FA",
+    headCursor: "pointer",
+    headFontWeight: "700",
+    headTextWrap: "nowrap",
+    headBorderStyle: "none",
+    headPosition: "relative",
+    headColor: "#002561",
+    bodyColor: "#002561",
+    paginationDisplay: "flex",
+    paginationBorderStyle: "none",
+    paginationPadding: "10px 16px",
+    paginationJustifyContent: "flex-start",
+    paginationToolbarMarginLeft: "0",
+    sortIndicatorColor:"#002561",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/uZX8k1fv1MfzGTEBXuvjeV/MFA---Main-Design-2.0?node-id=6305-222433&t=tqOyzQnwJakGTFif-4",
+    },
+  },
+};