Grid Component

The Grid component in goobs-frontend is a highly customizable and flexible grid system built with React and Material-UI. It allows you to create complex grid layouts with ease, providing a wide range of configuration options for grids, rows, columns, and cells.

Importing the Component

To use the Grid component in your project, import it from the goobs-frontend package:

import { CustomGrid } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the Grid component:

import React from 'react';
import { CustomGrid, Typography } from 'goobs-frontend';

const GridExample: React.FC = () => {
  const gridconfig = {
    gridname: 'exampleGrid',
    alignment: 'center',
    gridwidth: '100%',
  };

  const columnconfig = [
    {
      row: 1,
      column: 1,
      alignment: 'center',
      component: <Typography text="Cell (1, 1)" fontvariant="merrih4" />,
    },
    {
      row: 1,
      column: 2,
      alignment: 'center', 
      component: <Typography text="Cell (1, 2)" fontvariant="merrih4" />,
    },
    {
      row: 2,
      column: 1,
      alignment: 'center',
      component: <Typography text="Cell (2, 1)" fontvariant="merrih4" />,
    },
    {
      row: 2,
      column: 2,
      alignment: 'center',
      component: <Typography text="Cell (2, 2)" fontvariant="merrih4" />,
    },
  ];

  return <CustomGrid gridconfig={gridconfig} columnconfig={columnconfig} />;
};

export default GridExample;

Props

The CustomGrid component accepts the following props:

• gridconfig: gridconfig (optional) - Configuration object for the overall grid layout.
  • gridname: string - Name of the grid.
  • alignment: Alignment - Alignment of the grid content.
  • margintop: number - Top margin of the grid.
  • marginbottom: number - Bottom margin of the grid.
  • marginright: number - Right margin of the grid.
  • marginleft: number - Left margin of the grid.
  • gridwidth: string - Width of the grid.
  • bordercolor: string - Color of the grid border.
• columnconfig: columnconfig[] (optional) - Array of column configuration objects.
  • row: number - Row number of the cell.
  • column: number - Column number of the cell.
  • gridname: string - Name of the grid the cell belongs to.
  • alignment: Alignment - Alignment of the cell content.
  • margintop: number - Top margin of the cell.
  • columnwidth: string - Width of the column.
  • marginbottom: number - Bottom margin of the cell.
  • marginright: number - Right margin of the cell.
  • marginleft: number - Left margin of the cell.
  • component: React.ReactNode - Component to render in the cell.
  • bordercolor: string - Color of the cell border.
  • cellconfig: cellconfig - Configuration object for the cell.
  • mobilewidth: string - Width of the cell on mobile devices.
  • tabletwidth: string - Width of the cell on tablet devices.
  • computerwidth: string - Width of the cell on computer screens.
• cellconfig: cellconfig (optional) - Configuration object for individual cells.
  • border: BorderProp - Border style of the cell.
  • minHeight: string - Minimum height of the cell.
  • maxHeight: string - Maximum height of the cell.
  • width: string - Width of the cell.
  • mobilewidth: string - Width of the cell on mobile devices.
  • tabletwidth: string - Width of the cell on tablet devices.
  • computerwidth: string - Width of the cell on computer screens.

Features

1. Flexible Grid Layout: Create complex grid layouts with customizable rows, columns, and cells.
2. Responsive Design: Define different column widths for mobile, tablet, and computer screens.
3. Cell Configuration: Customize individual cells with specific components, alignment, margins, and more.
4. Border Styling: Add borders to the grid and cells with configurable colors and styles.
5. Margin Control: Set margins for the grid and cells to control spacing.
6. Alignment Options: Align content within the grid and cells using predefined alignment options.

Advanced Usage

Nested Grids

You can create nested grid layouts by using the Grid component within a cell of another Grid:

import React from 'react';
import { CustomGrid, Typography } from 'goobs-frontend';

const NestedGridExample: React.FC = () => {
  const outerGridConfig = {
    gridname: 'outerGrid',
    alignment: 'center',
    gridwidth: '100%',
  };

  const outerColumnConfig = [
    {
      row: 1,
      column: 1,
      alignment: 'center',
      component: (
        <CustomGrid
          gridconfig={{
            gridname: 'innerGrid',
            alignment: 'center',
            gridwidth: '80%',
          }}
          columnconfig={[
            {
              row: 1,
              column: 1,
              alignment: 'center',
              component: <Typography text="Inner Cell (1, 1)" fontvariant="merrih5" />,
            },
            {
              row: 1,
              column: 2,
              alignment: 'center',
              component: <Typography text="Inner Cell (1, 2)" fontvariant="merrih5" />,
            },
          ]}
        />
      ),
    },
  ];

  return <CustomGrid gridconfig={outerGridConfig} columnconfig={outerColumnConfig} />;
};

export default NestedGridExample;

Responsive Column Widths

Define different column widths for mobile, tablet, and computer screens using the mobilewidth, tabletwidth, and computerwidth properties:

import React from 'react';
import { CustomGrid, Typography } from 'goobs-frontend';

const ResponsiveGridExample: React.FC = () => {
  const gridconfig = {
    gridname: 'responsiveGrid',
    alignment: 'center',
    gridwidth: '100%',
  };

  const columnconfig = [
    {
      row: 1,
      column: 1,
      alignment: 'center',
      mobilewidth: '100%',
      tabletwidth: '50%',
      computerwidth: '30%',
      component: <Typography text="Responsive Cell (1, 1)" fontvariant="merrih4" />,
    },
    {
      row: 1,
      column: 2,
      alignment: 'center',
      mobilewidth: '100%',
      tabletwidth: '50%',
      computerwidth: '70%',
      component: <Typography text="Responsive Cell (1, 2)" fontvariant="merrih4" />,
    },
  ];

  return <CustomGrid gridconfig={gridconfig} columnconfig={columnconfig} />;
};

export default ResponsiveGridExample;

Styling

The Grid component can be styled using the various configuration options available in the gridconfig, columnconfig, and cellconfig props. You can control the alignment, margins, border colors, and more.

Here's an example of a styled Grid:

import React from 'react';
import { CustomGrid, Typography } from 'goobs-frontend';

const StyledGridExample: React.FC = () => {
  const gridconfig = {
    gridname: 'styledGrid',
    alignment: 'center',
    gridwidth: '80%',
    margintop: 2,
    marginbottom: 2,
    bordercolor: '#ccc',
  };

  const columnconfig = [
    {
      row: 1,
      column: 1,
      alignment: 'center',
      margintop: 1,
      marginbottom: 1,
      bordercolor: '#999',
      component: <Typography text="Styled Cell (1, 1)" fontvariant="merrih4" />,
    },
    {
      row: 1,
      column: 2,
      alignment: 'center',
      margintop: 1,
      marginbottom: 1,
      bordercolor: '#999',
      component: <Typography text="Styled Cell (1, 2)" fontvariant="merrih4" />,
    },
  ];

  return <CustomGrid gridconfig={gridconfig} columnconfig={columnconfig} />;
};

export default StyledGridExample;

Best Practices

1. Plan Your Layout: Before creating a grid, plan out the desired layout and structure of your components.

2. Use Meaningful Names: Assign descriptive names to your grids and cells using the gridname property for better readability and maintainability.

3. Responsive Design: Utilize the mobilewidth, tabletwidth, and computerwidth properties to create responsive layouts that adapt to different screen sizes.

4. Consistent Styling: Maintain a consistent styling approach throughout your application for a cohesive user experience.

5. Performance Optimization: For large or complex grids, consider using pagination, lazy loading, or virtualization techniques to improve performance.

6. Accessibility: Ensure that your grid layout is accessible by using appropriate ARIA attributes and maintaining a logical reading order.

Troubleshooting

1. Overlapping Cells: Check the row and column values in your columnconfig to ensure that cells are positioned correctly and not overlapping.

2. Unresponsive Layout: Verify that you have correctly set the mobilewidth, tabletwidth, and computerwidth properties for responsive behavior.

3. Missing Components: Make sure that you have provided a valid component or content for each cell in the component property of the columnconfig.

4. Styling Issues: Review the gridconfig, columnconfig, and cellconfig objects to ensure that the desired styling properties are correctly applied.

5. TypeScript Errors: If you encounter TypeScript errors, ensure that you have imported the necessary types and interfaces from the goobs-frontend package.

Examples

Dashboard Layout

import React from 'react';
import { CustomGrid, Typography, Card } from 'goobs-frontend';

const DashboardExample: React.FC = () => {
  const gridconfig = {
    gridname: 'dashboardGrid',
    alignment: 'center',
    gridwidth: '100%',
    margintop: 2,
    marginbottom: 2,
  };

  const columnconfig = [
    {
      row: 1,
      column: 1,
      alignment: 'center',
      component: (
        <Card title="Total Users" body="1,234" width="200px" />
      ),
    },
    {
      row: 1,
      column: 2,
      alignment: 'center',
      component: (
        <Card title="Revenue" body="$45,678" width="200px" />
      ),
    },
    {
      row: 2,
      column: 1,
      alignment: 'center',
      columnwidth: '100%',
      component: (
        <Typography text="Recent Activity" fontvariant="merrih4" />
      ),
    },
    // Add more cells for the dashboard layout
  ];

  return <CustomGrid gridconfig={gridconfig} columnconfig={columnconfig} />;
};

export default DashboardExample;

Product Catalog

import React from 'react';
import { CustomGrid, Typography, ProductCard } from 'goobs-frontend';

const ProductCatalogExample: React.FC = () => {
  const gridconfig = {
    gridname: 'productCatalogGrid',
    alignment: 'center',
    gridwidth: '100%',
    margintop: 2,
    marginbottom: 2,
  };

  const products = [
    { id: 1, name: 'Product 1', price: '$10', image: 'product1.jpg' },
    { id: 2, name: 'Product 2', price: '$20', image: 'product2.jpg' },
    { id: 3, name: 'Product 3', price: '$30', image: 'product3.jpg' },
    // Add more products
  ];

  const columnconfig = products.map((product, index) => ({
    row: Math.floor(index / 3) + 1,
    column: (index % 3) + 1,
    alignment: 'center',
    component: (
      <ProductCard
        title={product.name}
        price={product.price}
        image={product.image}
      />
    ),
  }));

  return <CustomGrid gridconfig={gridconfig} columnconfig={columnconfig} />;
};

export default ProductCatalogExample;

Performance Considerations

When working with large or complex grids, consider the following performance optimizations:

1. Pagination: Implement pagination for grids with a large number of cells to limit the number of rendered components at a time.

2. Lazy Loading: Use lazy loading techniques to load grid content on-demand as the user scrolls or navigates through the grid.

3. Virtualization: Implement virtualization techniques to render only the visible cells and efficiently manage memory usage.

4. Memoization: Utilize React's memoization capabilities (e.g., React.memo, useMemo) to prevent unnecessary re-renders of grid cells.

5. Code Splitting: Split your grid component into smaller, reusable components to improve code organization and enable more efficient updates.

Accessibility

To ensure that your Grid component is accessible to all users, follow these guidelines:

1. Semantic Markup: Use semantic HTML elements within your grid cells to provide meaningful structure and context.

2. ARIA Attributes: Apply appropriate ARIA attributes to grid cells and components to convey their roles and properties to assistive technologies.

3. Keyboard Navigation: Ensure that the grid and its cells are navigable using keyboard controls, such as arrow keys or tab key.

4. Focus Management: Manage focus within the grid to guide users through the content in a logical order.

5. Alt Text: Provide alternative text for images or visual elements within grid cells to make them accessible to screen readers.

6. Color Contrast: Ensure sufficient color contrast between text and background colors to improve readability for users with visual impairments.

7. Responsive Design: Implement responsive design techniques to ensure that the grid layout remains accessible and usable on different screen sizes and devices.

Related Components

• Typography: Used for rendering text content within grid cells.
• Card: A commonly used component for displaying content within grid cells.
• ProductCard: A specialized card component for displaying product information in a grid layout.

Future Enhancements

Some potential future enhancements for the Grid component could include:

1. Drag and Drop: Implement drag and drop functionality to allow users to rearrange grid cells dynamically.

2. Resizable Cells: Add the ability to resize grid cells by dragging their borders.

3. Animated Transitions: Incorporate smooth animations when adding, removing, or rearranging grid cells.

4. Infinite Scrolling: Implement infinite scrolling functionality for grids with large amounts of data.

5. Customizable Breakpoints: Allow users to define custom breakpoints for responsive grid behavior.

6. Saved Layouts: Provide a way to save and load grid layouts for reusability and personalization.

7. Grid Templates: Offer pre-defined grid templates for common layout patterns.

8. Theming Support: Integrate with a theming system to enable easy customization of grid colors, fonts, and styles.

9. Performance Monitoring: Include performance monitoring tools to identify and optimize performance bottlenecks in large grids.

10. Accessibility Enhancements: Continuously improve accessibility features and compliance with the latest accessibility guidelines.

These enhancements would further enhance the flexibility, usability, and performance of the Grid component in future versions of goobs-frontend.