Doc: SonaCloud Table Changes

zimmerman-team · Nov 29, 2024 · 5b3e37e · 5b3e37e
1 parent 08e1a76
commit 5b3e37e
Show file tree

Hide file tree

Showing 12 changed files with 8,826 additions and 8,285 deletions.
diff --git a/src/components/tables/mui-datagrid/data.ts b/src/components/tables/mui-datagrid/data.ts
@@ -1,37 +1,256 @@
-
 // Defining the columns for the data grid
 export const columns = [
-  { field: 'id', headerName: 'ID', width: 90 },
-  { field: 'name', headerName: 'Name', width: 150 },
-  { field: 'age', headerName: 'Age', width: 110 },
-  { field: 'country', headerName: 'Country', width: 150 },
-  { field: 'occupation', headerName: 'Occupation', width: 150 },
-  { field: 'company', headerName: 'Company', width: 150 },
-  { field: 'department', headerName: 'Department', width: 150 },
-  { field: 'salary', headerName: 'Salary', width: 150 },
-  { field: 'experience', headerName: 'Experience', width: 150 },
-  { field: 'education', headerName: 'Education', width: 150 },
+  { field: "id", headerName: "ID", width: 90 },
+  { field: "name", headerName: "Name", width: 150 },
+  { field: "age", headerName: "Age", width: 110 },
+  { field: "country", headerName: "Country", width: 150 },
+  { field: "occupation", headerName: "Occupation", width: 150 },
+  { field: "company", headerName: "Company", width: 150 },
+  { field: "department", headerName: "Department", width: 150 },
+  { field: "salary", headerName: "Salary", width: 150 },
+  { field: "experience", headerName: "Experience", width: 150 },
+  { field: "education", headerName: "Education", width: 150 },
 ];
 // Defining the rows for the data grid
 export const rows = [
-  { id: 1, name: 'Alice', age: 25, country: 'USA', occupation: 'Engineer', company: 'TechCorp', department: 'R&D', salary: '$100,000', experience: '5 years', education: 'MSc' },
-  { id: 2, name: 'Bob', age: 30, country: 'Canada', occupation: 'Designer', company: 'DesignStudio', department: 'Design', salary: '$90,000', experience: '7 years', education: 'BDes' },
-  { id: 3, name: 'Charlie', age: 35, country: 'UK', occupation: 'Manager', company: 'BusinessInc', department: 'Management', salary: '$120,000', experience: '10 years', education: 'MBA' },
-  { id: 4, name: 'David', age: 28, country: 'Australia', occupation: 'Developer', company: 'DevWorks', department: 'Development', salary: '$110,000', experience: '6 years', education: 'BSc' },
-  { id: 5, name: 'Eve', age: 22, country: 'Germany', occupation: 'Intern', company: 'InternshipCo', department: 'Internship', salary: '$50,000', experience: '1 year', education: 'BSc' },
-  { id: 6, name: 'Frank', age: 40, country: 'France', occupation: 'CEO', company: 'BigCorp', department: 'Executive', salary: '$200,000', experience: '15 years', education: 'PhD' },
-  { id: 7, name: 'Grace', age: 29, country: 'Japan', occupation: 'Researcher', company: 'ResearchLab', department: 'Research', salary: '$95,000', experience: '7 years', education: 'PhD' },
-  { id: 8, name: 'Hank', age: 33, country: 'China', occupation: 'Analyst', company: 'AnalyticsLtd', department: 'Analytics', salary: '$85,000', experience: '8 years', education: 'MSc' },
-  { id: 9, name: 'Ivy', age: 27, country: 'India', occupation: 'Consultant', company: 'ConsultingGroup', department: 'Consulting', salary: '$105,000', experience: '5 years', education: 'MBA' },
-  { id: 10, name: 'Jack', age: 31, country: 'Brazil', occupation: 'Architect', company: 'ArchitectureFirm', department: 'Architecture', salary: '$115,000', experience: '9 years', education: 'MArch' },
-  { id: 11, name: 'Karen', age: 26, country: 'South Korea', occupation: 'Teacher', company: 'EducationFirst', department: 'Education', salary: '$70,000', experience: '4 years', education: 'MEd' },
-  { id: 12, name: 'Leo', age: 34, country: 'Italy', occupation: 'Chef', company: 'GourmetKitchen', department: 'Culinary', salary: '$95,000', experience: '12 years', education: 'Culinary Arts' },
-  { id: 13, name: 'Mona', age: 29, country: 'Spain', occupation: 'Artist', company: 'ArtGallery', department: 'Art', salary: '$80,000', experience: '6 years', education: 'BFA' },
-  { id: 14, name: 'Nina', age: 32, country: 'Russia', occupation: 'Scientist', company: 'ResearchInstitute', department: 'Science', salary: '$110,000', experience: '10 years', education: 'PhD' },
-  { id: 15, name: 'Oscar', age: 27, country: 'Mexico', occupation: 'Lawyer', company: 'LegalFirm', department: 'Legal', salary: '$130,000', experience: '5 years', education: 'JD' },
-  { id: 16, name: 'Paul', age: 36, country: 'Netherlands', occupation: 'Photographer', company: 'PhotoStudio', department: 'Photography', salary: '$75,000', experience: '15 years', education: 'BFA' },
-  { id: 17, name: 'Quincy', age: 24, country: 'South Africa', occupation: 'Journalist', company: 'NewsCorp', department: 'Journalism', salary: '$65,000', experience: '3 years', education: 'BA' },
-  { id: 18, name: 'Rachel', age: 28, country: 'Israel', occupation: 'Doctor', company: 'HealthCare', department: 'Medical', salary: '$150,000', experience: '6 years', education: 'MD' },
-  { id: 19, name: 'Sam', age: 31, country: 'New Zealand', occupation: 'Pilot', company: 'Airways', department: 'Aviation', salary: '$140,000', experience: '10 years', education: 'BSc' },
-  { id: 20, name: 'Tina', age: 30, country: 'Sweden', occupation: 'Nurse', company: 'Hospital', department: 'Nursing', salary: '$80,000', experience: '8 years', education: 'BSN' },
-];
+  {
+    id: 1,
+    name: "Alice",
+    age: 25,
+    country: "USA",
+    occupation: "Engineer",
+    company: "TechCorp",
+    department: "R&D",
+    salary: "$100,000",
+    experience: "5 years",
+    education: "MSc",
+  },
+  {
+    id: 2,
+    name: "Bob",
+    age: 30,
+    country: "Canada",
+    occupation: "Designer",
+    company: "DesignStudio",
+    department: "Design",
+    salary: "$90,000",
+    experience: "7 years",
+    education: "BDes",
+  },
+  {
+    id: 3,
+    name: "Charlie",
+    age: 35,
+    country: "UK",
+    occupation: "Manager",
+    company: "BusinessInc",
+    department: "Management",
+    salary: "$120,000",
+    experience: "10 years",
+    education: "MBA",
+  },
+  {
+    id: 4,
+    name: "David",
+    age: 28,
+    country: "Australia",
+    occupation: "Developer",
+    company: "DevWorks",
+    department: "Development",
+    salary: "$110,000",
+    experience: "6 years",
+    education: "BSc",
+  },
+  {
+    id: 5,
+    name: "Eve",
+    age: 22,
+    country: "Germany",
+    occupation: "Intern",
+    company: "InternshipCo",
+    department: "Internship",
+    salary: "$50,000",
+    experience: "1 year",
+    education: "BSc",
+  },
+  {
+    id: 6,
+    name: "Frank",
+    age: 40,
+    country: "France",
+    occupation: "CEO",
+    company: "BigCorp",
+    department: "Executive",
+    salary: "$200,000",
+    experience: "15 years",
+    education: "PhD",
+  },
+  {
+    id: 7,
+    name: "Grace",
+    age: 29,
+    country: "Japan",
+    occupation: "Researcher",
+    company: "ResearchLab",
+    department: "Research",
+    salary: "$95,000",
+    experience: "7 years",
+    education: "PhD",
+  },
+  {
+    id: 8,
+    name: "Hank",
+    age: 33,
+    country: "China",
+    occupation: "Analyst",
+    company: "AnalyticsLtd",
+    department: "Analytics",
+    salary: "$85,000",
+    experience: "8 years",
+    education: "MSc",
+  },
+  {
+    id: 9,
+    name: "Ivy",
+    age: 27,
+    country: "India",
+    occupation: "Consultant",
+    company: "ConsultingGroup",
+    department: "Consulting",
+    salary: "$105,000",
+    experience: "5 years",
+    education: "MBA",
+  },
+  {
+    id: 10,
+    name: "Jack",
+    age: 31,
+    country: "Brazil",
+    occupation: "Architect",
+    company: "ArchitectureFirm",
+    department: "Architecture",
+    salary: "$115,000",
+    experience: "9 years",
+    education: "MArch",
+  },
+  {
+    id: 11,
+    name: "Karen",
+    age: 26,
+    country: "South Korea",
+    occupation: "Teacher",
+    company: "EducationFirst",
+    department: "Education",
+    salary: "$70,000",
+    experience: "4 years",
+    education: "MEd",
+  },
+  {
+    id: 12,
+    name: "Leo",
+    age: 34,
+    country: "Italy",
+    occupation: "Chef",
+    company: "GourmetKitchen",
+    department: "Culinary",
+    salary: "$95,000",
+    experience: "12 years",
+    education: "Culinary Arts",
+  },
+  {
+    id: 13,
+    name: "Mona",
+    age: 29,
+    country: "Spain",
+    occupation: "Artist",
+    company: "ArtGallery",
+    department: "Art",
+    salary: "$80,000",
+    experience: "6 years",
+    education: "BFA",
+  },
+  {
+    id: 14,
+    name: "Nina",
+    age: 32,
+    country: "Russia",
+    occupation: "Scientist",
+    company: "ResearchInstitute",
+    department: "Science",
+    salary: "$110,000",
+    experience: "10 years",
+    education: "PhD",
+  },
+  {
+    id: 15,
+    name: "Oscar",
+    age: 27,
+    country: "Mexico",
+    occupation: "Lawyer",
+    company: "LegalFirm",
+    department: "Legal",
+    salary: "$130,000",
+    experience: "5 years",
+    education: "JD",
+  },
+  {
+    id: 16,
+    name: "Paul",
+    age: 36,
+    country: "Netherlands",
+    occupation: "Photographer",
+    company: "PhotoStudio",
+    department: "Photography",
+    salary: "$75,000",
+    experience: "15 years",
+    education: "BFA",
+  },
+  {
+    id: 17,
+    name: "Quincy",
+    age: 24,
+    country: "South Africa",
+    occupation: "Journalist",
+    company: "NewsCorp",
+    department: "Journalism",
+    salary: "$65,000",
+    experience: "3 years",
+    education: "BA",
+  },
+  {
+    id: 18,
+    name: "Rachel",
+    age: 28,
+    country: "Israel",
+    occupation: "Doctor",
+    company: "HealthCare",
+    department: "Medical",
+    salary: "$150,000",
+    experience: "6 years",
+    education: "MD",
+  },
+  {
+    id: 19,
+    name: "Sam",
+    age: 31,
+    country: "New Zealand",
+    occupation: "Pilot",
+    company: "Airways",
+    department: "Aviation",
+    salary: "$140,000",
+    experience: "10 years",
+    education: "BSc",
+  },
+  {
+    id: 20,
+    name: "Tina",
+    age: 30,
+    country: "Sweden",
+    occupation: "Nurse",
+    company: "Hospital",
+    department: "Nursing",
+    salary: "$80,000",
+    experience: "8 years",
+    education: "BSN",
+  },
+];
diff --git a/src/components/tables/mui-datagrid/datagrid.stories.tsx b/src/components/tables/mui-datagrid/datagrid.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import myDataGrid from "./datagrid";
 import { GridToolbarContainer, GridToolbarQuickFilter } from "@mui/x-data-grid";
-import {columns,rows} from "./data"
+import { columns, rows } from "./data";
 
 // Custom toolbar component for the DataGrid
 const CustomToolbar = () => (
@@ -64,8 +64,8 @@ export const DefaultDataGrid: Story = {
       cellActiveOutline: "2px solid red",
     },
     sx: {
-      backgroundColor: '#f0f0f0',
-      height: 'auto', 
+      backgroundColor: "#f0f0f0",
+      height: "auto",
     },
   },
 };
@@ -88,8 +88,8 @@ export const DataGridWithCustomToolbar: Story = {
       cellActiveOutline: "2px solid red",
     },
     sx: {
-      backgroundColor: '#f0f0f0',
-      height: 'auto', 
+      backgroundColor: "#f0f0f0",
+      height: "auto",
     },
     slots: {
       toolbar: CustomToolbar,
@@ -126,8 +126,8 @@ export const DataGridWithCheckboxSelection: Story = {
       cellActiveOutline: "2px solid red",
     },
     sx: {
-      backgroundColor: '#f0f0f0',
-      height: 'auto',
+      backgroundColor: "#f0f0f0",
+      height: "auto",
     },
   },
 };
@@ -151,8 +151,8 @@ export const DataGridWithPagination: Story = {
       cellActiveOutline: "2px solid red",
     },
     sx: {
-      backgroundColor: '#f0f0f0',
-      height: 'auto', 
+      backgroundColor: "#f0f0f0",
+      height: "auto",
     },
   },
 };
@@ -165,7 +165,7 @@ export const DataGridWithSorting: Story = {
     hideFooter: true,
     rowHeight: 46,
     headerFontSize: "16px",
-    sortingOrder: ['asc', 'desc'],
+    sortingOrder: ["asc", "desc"],
     customStyles: {
       borderStyle: "solid",
       columnHeaderTitleFontSize: "16px",
@@ -177,8 +177,8 @@ export const DataGridWithSorting: Story = {
       cellActiveOutline: "2px solid red",
     },
     sx: {
-      backgroundColor: '#f0f0f0',
-      height: 'auto',
+      backgroundColor: "#f0f0f0",
+      height: "auto",
     },
   },
 };
@@ -191,9 +191,7 @@ export const DataGridWithFiltering: Story = {
     rowHeight: 46,
     headerFontSize: "16px",
     filterModel: {
-      items: [
-        { field: 'name', operator: 'contains', value: 'Alice' },
-      ],
+      items: [{ field: "name", operator: "contains", value: "Alice" }],
     },
     customStyles: {
       borderStyle: "solid",
@@ -206,8 +204,8 @@ export const DataGridWithFiltering: Story = {
       cellActiveOutline: "2px solid red",
     },
     sx: {
-      backgroundColor: '#f0f0f0',
-      height: 'auto', 
+      backgroundColor: "#f0f0f0",
+      height: "auto",
     },
   },
-};
+};