tessl/npm-material-ui--data-grid

Community edition React data grid component with sorting, filtering, pagination, and Material-UI integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

DataGrid Component

Name: tessl/npm-material-ui--data-grid
Author: tessl

The DataGrid component is the main React component that renders a data grid with Material-UI styling. It provides the community edition functionality with some limitations compared to the full x-grid package.

Capabilities

DataGrid Component

Main React component for rendering data grids with restricted community features.

/**
 * Community edition data grid component with Material-UI integration
 * Supports up to 100 rows per page with single column sorting and single row selection
 */
declare const DataGrid: React.ForwardRefExoticComponent<
  DataGridProps & React.RefAttributes<HTMLDivElement>
>;

interface DataGridProps extends DataGridOptionsProp {
  /** Array of row data objects with required id field */
  rows: RowsProp;
  /** Array of column definition objects */
  columns: Columns;
  /** Custom component overrides for UI elements */
  components?: GridComponentOverridesProp;
  /** Boolean flag to show loading overlay */
  loading?: boolean;
  /** CSS class name to apply to root element */
  className?: string;
  /** Error object to display in error state */
  error?: any;
}

type DataGridOptionsProp = Partial<
  Exclude<GridOptions, 'pagination' | 'disableMultipleColumnsSorting' | 'disableMultipleSelection'>
>;

type RowsProp = RowData[];
type Columns = ColDef[];

Usage Examples:

import React from "react";
import { DataGrid } from "@material-ui/data-grid";

// Basic usage
function BasicGrid() {
  const columns = [
    { field: "id", headerName: "ID", width: 90 },
    { field: "name", headerName: "Name", width: 150 },
    { field: "age", headerName: "Age", type: "number", width: 110 },
  ];

  const rows = [
    { id: 1, name: "Alice", age: 25 },
    { id: 2, name: "Bob", age: 30 },
  ];

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

// With pagination and selection
function AdvancedGrid() {
  const [pageSize, setPageSize] = React.useState(25);
  
  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={pageSize}
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
        rowsPerPageOptions={[25, 50, 100]}
        checkboxSelection
        onSelectionChange={(params) => {
          console.log("Selected rows:", params.selectionModel);
        }}
      />
    </div>
  );
}

// With loading state
function LoadingGrid() {
  const [loading, setLoading] = React.useState(true);
  const [rows, setRows] = React.useState([]);

  React.useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setRows([
        { id: 1, name: "Alice", age: 25 },
        { id: 2, name: "Bob", age: 30 },
      ]);
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        loading={loading}
      />
    </div>
  );
}

Community Edition Restrictions

The DataGrid component has several built-in restrictions compared to the full x-grid package:

// These options are automatically set and cannot be overridden
const OPTIONS_OVERRIDES: Partial<GridOptions> = {
  /** Pagination is always enabled */
  pagination: true,
  /** Only single column sorting allowed */
  disableMultipleColumnsSorting: true,
  /** Only single row selection allowed */
  disableMultipleSelection: true,
};

// Maximum page size validation
const MAX_PAGE_SIZE = 100;

Usage Notes:

Maximum page size is limited to 100 rows
Multiple column sorting is disabled
Multiple row selection is disabled
Pagination is always enabled
Attempting to set pageSize > 100 will throw an error

Component Forwarding

The DataGrid component forwards refs to the underlying HTML div element:

/**
 * Forward ref type for DataGrid component
 * Provides access to the root HTML div element
 */
type DataGridRef = HTMLDivElement;

Usage Example:

import React from "react";
import { DataGrid } from "@material-ui/data-grid";

function GridWithRef() {
  const gridRef = React.useRef<HTMLDivElement>(null);

  const focusGrid = () => {
    if (gridRef.current) {
      gridRef.current.focus();
    }
  };

  return (
    <div>
      <button onClick={focusGrid}>Focus Grid</button>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          ref={gridRef}
          rows={rows}
          columns={columns}
        />
      </div>
    </div>
  );
}

Error Handling

The DataGrid component supports error states through the error prop:

interface DataGridProps {
  /** Error object to display in error state */
  error?: any;
}

Usage Example:

function GridWithErrorHandling() {
  const [error, setError] = React.useState(null);
  const [rows, setRows] = React.useState([]);

  const fetchData = async () => {
    try {
      const response = await fetch("/api/data");
      const data = await response.json();
      setRows(data);
      setError(null);
    } catch (err) {
      setError(err);
    }
  };

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        error={error}
        onError={(args) => {
          console.error("Grid error:", args);
          setError(args);
        }}
      />
    </div>
  );
}