feat: DataGrid Table Component

DataGrid Component, Datagrid Stories , index file, data file for the datagrid

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

@@ -0,0 +1,35 @@
+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 },
+];
+
+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' },
+];

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

@@ -0,0 +1,208 @@
+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"
+
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <GridToolbarQuickFilter />
+    <button>Custom Filter</button>
+    <button>Custom Add File</button>
+    <button>Custom Columns</button>
+    <button>Custom Sort</button>
+  </GridToolbarContainer>
+);
+
+const meta: Meta<typeof myDataGrid> = {
+  title: "Example/Table/DataGrid Tables",
+  component: myDataGrid,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    arialabel: { control: "text" },
+    arialabelledby: { control: "text" },
+    hideFooter: { control: "boolean" },
+    autoHeight: { control: "boolean" },
+    autoPageSize: { control: "boolean" },
+    autosizeOnMount: { control: "boolean" },
+    checkboxSelection: { control: "boolean" },
+    columnHeaderHeight: { control: { type: "number" } },
+    rowHeight: { control: { type: "number" } },
+    rowSelection: { control: "boolean" },
+    headerFontSize: { control: "text" },
+    customStyles: { control: "object" },
+    slots: { control: "object" },
+    slotProps: { control: "object" },
+    sx: { control: "object" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof myDataGrid>;
+
+export const DefaultDataGrid: Story = {
+  args: {
+    rows,
+    columns,
+    hideFooter: true,
+    rowHeight: 46,
+    headerFontSize: "16px",
+    customStyles: {
+      borderStyle: "solid",
+      columnHeaderTitleFontSize: "16px",
+      columnHeaderTitleFontWeight: "bold",
+      columnHeaderTitleColor: "#333",
+      rowHoverBackground: "#f0f0f0",
+      cellFontSize: "14px",
+      cellFocusOutline: "2px solid blue",
+      cellActiveOutline: "2px solid red",
+    },
+    sx: {
+      backgroundColor: '#f0f0f0',
+      height: 'auto', 
+    },
+  },
+};
+
+export const DataGridWithCustomToolbar: Story = {
+  args: {
+    rows,
+    columns,
+    hideFooter: true,
+    rowHeight: 46,
+    headerFontSize: "16px",
+    customStyles: {
+      borderStyle: "solid",
+      columnHeaderTitleFontSize: "16px",
+      columnHeaderTitleFontWeight: "bold",
+      columnHeaderTitleColor: "#333",
+      rowHoverBackground: "#f0f0f0",
+      cellFontSize: "14px",
+      cellFocusOutline: "2px solid blue",
+      cellActiveOutline: "2px solid red",
+    },
+    sx: {
+      backgroundColor: '#f0f0f0',
+      height: 'auto', 
+    },
+    slots: {
+      toolbar: CustomToolbar,
+    },
+    slotProps: {
+      toolbar: {
+        showQuickFilter: true,
+        showFilterButton: true,
+        showAddFileButton: true,
+        showColumnsButton: true,
+        showSortButton: true,
+      },
+    },
+  },
+};
+
+export const DataGridWithCheckboxSelection: Story = {
+  args: {
+    rows,
+    columns,
+    hideFooter: true,
+    rowHeight: 46,
+    headerFontSize: "16px",
+    checkboxSelection: true,
+    customStyles: {
+      borderStyle: "solid",
+      columnHeaderTitleFontSize: "16px",
+      columnHeaderTitleFontWeight: "bold",
+      columnHeaderTitleColor: "#333",
+      rowHoverBackground: "#f0f0f0",
+      cellFontSize: "14px",
+      cellFocusOutline: "2px solid blue",
+      cellActiveOutline: "2px solid red",
+    },
+    sx: {
+      backgroundColor: '#f0f0f0',
+      height: 'auto',
+    },
+  },
+};
+
+export const DataGridWithPagination: Story = {
+  args: {
+    rows,
+    columns,
+    hideFooter: false,
+    rowHeight: 46,
+    headerFontSize: "16px",
+    customStyles: {
+      borderStyle: "solid",
+      columnHeaderTitleFontSize: "16px",
+      columnHeaderTitleFontWeight: "bold",
+      columnHeaderTitleColor: "#333",
+      rowHoverBackground: "#f0f0f0",
+      cellFontSize: "14px",
+      cellFocusOutline: "2px solid blue",
+      cellActiveOutline: "2px solid red",
+    },
+    sx: {
+      backgroundColor: '#f0f0f0',
+      height: 'auto', 
+    },
+  },
+};
+
+export const DataGridWithSorting: Story = {
+  args: {
+    rows,
+    columns,
+    hideFooter: true,
+    rowHeight: 46,
+    headerFontSize: "16px",
+    sortingOrder: ['asc', 'desc'],
+    customStyles: {
+      borderStyle: "solid",
+      columnHeaderTitleFontSize: "16px",
+      columnHeaderTitleFontWeight: "bold",
+      columnHeaderTitleColor: "#333",
+      rowHoverBackground: "#f0f0f0",
+      cellFontSize: "14px",
+      cellFocusOutline: "2px solid blue",
+      cellActiveOutline: "2px solid red",
+    },
+    sx: {
+      backgroundColor: '#f0f0f0',
+      height: 'auto',
+    },
+  },
+};
+
+export const DataGridWithFiltering: Story = {
+  args: {
+    rows,
+    columns,
+    hideFooter: true,
+    rowHeight: 46,
+    headerFontSize: "16px",
+    filterModel: {
+      items: [
+        { field: 'name', operator: 'contains', value: 'Alice' },
+      ],
+    },
+    customStyles: {
+      borderStyle: "solid",
+      columnHeaderTitleFontSize: "16px",
+      columnHeaderTitleFontWeight: "bold",
+      columnHeaderTitleColor: "#333",
+      rowHoverBackground: "#f0f0f0",
+      cellFontSize: "14px",
+      cellFocusOutline: "2px solid blue",
+      cellActiveOutline: "2px solid red",
+    },
+    sx: {
+      backgroundColor: '#f0f0f0',
+      height: 'auto', 
+    },
+  },
+};

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

@@ -0,0 +1,122 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import {
+  DataGrid,
+  DataGridProps,
+  useGridApiContext,
+  GridSlotsComponent,
+  GridToolbarContainer,
+  GridToolbarQuickFilter,
+  BaseCheckboxPropsOverrides,
+  BaseTextFieldPropsOverrides,
+} from "@mui/x-data-grid";
+import { SxProps } from '@mui/system';
+
+interface CustomStyles {
+  boxWidth?: string;
+  minHeight?: string;
+  borderStyle?: string;
+  columnHeaderTitleFontSize?: string;
+  columnHeaderTitleFontWeight?: string | number;
+  columnHeaderTitleColor?: string;
+  rowHoverBackground?: string;
+  cellFontSize?: string;
+  cellFocusOutline?: string;
+  cellActiveOutline?: string;
+}
+
+interface GridProps extends DataGridProps {
+  arialabel?: string;
+  arialabelledby?: string;
+  hideFooter?: boolean;
+  autoHeight?: boolean;
+  autoPageSize?: boolean;
+  autosizeOnMount?: boolean;
+  checkboxSelection?: boolean;
+  columnHeaderHeight?: number;
+  rowHeight?: number;
+  rows?: any[];
+  rowSelection?: boolean;
+  columns: readonly any[];
+  headerFontSize?: string;
+  sx?: SxProps;
+  customStyles?: CustomStyles;
+  slots?: Partial<GridSlotsComponent> | undefined;
+  slotProps?:object;
+  disableRowSelectionOnClick?: boolean;
+}
+
+export default function myDataGrid({
+  arialabel,
+  arialabelledby,
+  hideFooter,
+  autoHeight,
+  autoPageSize,
+  autosizeOnMount,
+  checkboxSelection=false,
+  columnHeaderHeight,
+  rowHeight,
+  rowSelection,
+  rows,
+  columns,
+  headerFontSize,
+  customStyles = {},
+  sx,
+  slots,
+  slotProps,
+  disableRowSelectionOnClick=false,
+  ...otherProps
+}: Readonly <GridProps>) {
+  return (
+    <Box
+      sx={{
+        width: customStyles.boxWidth ?? "100%",
+        minHeight: customStyles.minHeight ?? "250px",
+      }}
+    >
+      <DataGrid
+        aria-label={arialabel}
+        aria-labelledby={arialabelledby}
+        hideFooter={hideFooter}
+        autoHeight={autoHeight}
+        rowHeight={rowHeight ?? 46}
+        rows={rows}
+        rowSelection={rowSelection}
+        columnHeaderHeight={columnHeaderHeight ?? 46}
+        columns={columns}
+        columnVisibilityModel={{
+          id: false,
+        }}
+        checkboxSelection={checkboxSelection}
+        disableRowSelectionOnClick={disableRowSelectionOnClick}
+        sx={{
+          borderStyle: customStyles.borderStyle ?? "none",
+          ".MuiDataGrid-columnHeaderTitle": {
+            fontSize: customStyles.columnHeaderTitleFontSize ?? headerFontSize ?? "14px",
+            fontWeight: customStyles.columnHeaderTitleFontWeight ?? "700",
+            color: customStyles.columnHeaderTitleColor ?? "#0C162A",
+          },
+          ".MuiDataGrid-row": {
+            ":hover": {
+              background: customStyles.rowHoverBackground ?? "transparent",
+            },
+          },
+          ".MuiDataGrid-cell": {
+            fontSize: customStyles.cellFontSize ?? "12px",
+            ":focus": {
+              outline: customStyles.cellFocusOutline ?? "none",
+            },
+            ":active": {
+              outline: customStyles.cellActiveOutline ?? "none",
+            },
+          },
+          ...sx,
+        }}
+        slots={slots}
+        slotProps={slotProps}
+        {...otherProps}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1 @@
+export {default as MyDataGrid} from "./datagrid"