CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

column-system.mddocs/

Column System

The column system provides flexible configuration for defining how data is displayed, formatted, and interacted with in the data grid. It supports various data types, custom renderers, and advanced formatting options.

Capabilities

Column Definition

Core interface for defining column behavior, appearance, and data handling.

/**
 * Column definition interface for configuring grid columns
 * Supports data binding, formatting, rendering, and interaction customization
 */
interface ColDef {
  /** Unique identifier for mapping to row data properties */
  field: string;
  /** Display name shown in column header */
  headerName?: string;
  /** Tooltip description for column header */
  description?: string;
  /** Column width in pixels (default: 100) */
  width?: number;
  /** Hide column from display */
  hide?: boolean;
  /** Enable column sorting (default: true) */
  sortable?: boolean;
  /** Enable column resizing (default: true) */
  resizable?: boolean;
  /** Custom sort comparator function */
  sortComparator?: ComparatorFn;
  /** Initial sort direction */
  sortDirection?: SortDirection;
  /** Sort priority for multi-column sorting */
  sortIndex?: number;
  /** Column data type (default: 'string') */
  type?: ColType;
  /** Cell content alignment */
  align?: Alignment;
  /** Function to extract cell value from row data */
  valueGetter?: (params: ValueGetterParams) => CellValue;
  /** Function to format cell value for display */
  valueFormatter?: (params: ValueFormatterParams) => CellValue;
  /** CSS class name for cells in this column */
  cellClassName?: CellClassNamePropType;
  /** Dynamic CSS class rules for cells */
  cellClassRules?: CellClassRules;
  /** Custom React component for rendering cells */
  renderCell?: (params: CellParams) => React.ReactElement;
  /** CSS class name for column header */
  headerClassName?: string | string[];
  /** Custom React component for rendering column header */
  renderHeader?: (params: ColParams) => React.ReactElement;
  /** Header content alignment */
  headerAlign?: Alignment;
  /** Hide sort icons in header */
  hideSortIcons?: boolean;
  /** Disable click event bubbling in cells */
  disableClickEventBubbling?: boolean;
}

type Columns = ColDef[];
type Alignment = "left" | "right" | "center";
type ColType = "string" | "number" | "date" | "dateTime" | "boolean";
type SortDirection = "asc" | "desc" | null;
type ComparatorFn = (v1: CellValue, v2: CellValue) => number;

Usage Examples:

import { ColDef } from "@material-ui/data-grid";

// Basic column definitions
const basicColumns: ColDef[] = [
  { field: "id", headerName: "ID", width: 90 },
  { field: "firstName", headerName: "First Name", width: 150 },
  { field: "lastName", headerName: "Last Name", width: 150 },
  { field: "age", headerName: "Age", type: "number", width: 110 },
];

// Advanced column with custom formatting
const advancedColumns: ColDef[] = [
  {
    field: "fullName",
    headerName: "Full Name",
    width: 200,
    valueGetter: (params) => {
      return `${params.row.firstName || ""} ${params.row.lastName || ""}`;
    },
  },
  {
    field: "salary",
    headerName: "Salary",
    type: "number",
    width: 120,
    align: "right",
    valueFormatter: (params) => {
      return `$${params.value?.toLocaleString()}`;
    },
  },
  {
    field: "isActive",
    headerName: "Status",
    width: 100,
    renderCell: (params) => (
      <span style={{ 
        color: params.value ? "green" : "red",
        fontWeight: "bold" 
      }}>
        {params.value ? "Active" : "Inactive"}
      </span>
    ),
  },
];

Column Types

Built-in column types with default behavior and formatting.

type ColType = "string" | "number" | "date" | "dateTime" | "boolean";

/** Built-in column type definitions with default configurations */
interface ColTypeDef {
  /** Column type identifier */
  type: ColType;
  /** Default width for this column type */
  width?: number;
  /** Default alignment for this column type */
  align?: Alignment;
  /** Default sort comparator */
  sortComparator?: ComparatorFn;
  /** Default value formatter */
  valueFormatter?: (params: ValueFormatterParams) => CellValue;
}

Usage Examples:

// String columns (default type)
const stringColumn: ColDef = {
  field: "name",
  headerName: "Name",
  type: "string", // Optional, this is the default
  align: "left",  // Default alignment for strings
};

// Number columns with right alignment
const numberColumn: ColDef = {
  field: "price",
  headerName: "Price",
  type: "number",
  align: "right", // Numbers typically right-aligned
  valueFormatter: (params) => `$${params.value}`,
};

// Date columns with custom formatting
const dateColumn: ColDef = {
  field: "createdAt",
  headerName: "Created",
  type: "date",
  width: 150,
  valueFormatter: (params) => {
    return params.value ? new Date(params.value).toLocaleDateString() : "";
  },
};

// Boolean columns with custom rendering
const booleanColumn: ColDef = {
  field: "isPublished",
  headerName: "Published",
  type: "boolean",
  width: 100,
  renderCell: (params) => (
    <input
      type="checkbox"
      checked={params.value}
      disabled
    />
  ),
};

Value Getters and Formatters

Functions for extracting and formatting cell values from row data.

interface ValueGetterParams {
  /** Row ID */
  id: RowId;
  /** Column field name */
  field: string;
  /** Complete row data object */
  row: RowData;
  /** Column definition */
  colDef: ColDef;
  /** Grid API reference */
  api: GridApi;
}

interface ValueFormatterParams {
  /** Raw cell value */
  value: CellValue;
  /** Row ID */
  id: RowId;
  /** Column field name */
  field: string;
  /** Complete row data object */
  row: RowData;
  /** Column definition */
  colDef: ColDef;
  /** Grid API reference */
  api: GridApi;
}

type CellValue = string | number | boolean | Date | null | undefined | object;

Usage Examples:

// Value getter - compute values from multiple fields
const computedColumn: ColDef = {
  field: "fullName",
  headerName: "Full Name",
  width: 200,
  valueGetter: (params: ValueGetterParams) => {
    const { firstName, lastName } = params.row;
    return `${firstName || ""} ${lastName || ""}`.trim();
  },
};

// Value formatter - format raw values for display
const currencyColumn: ColDef = {
  field: "amount",
  headerName: "Amount",
  type: "number",
  valueFormatter: (params: ValueFormatterParams) => {
    if (params.value == null) return "";
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(params.value);
  },
};

// Combined getter and formatter
const statusColumn: ColDef = {
  field: "status",
  headerName: "Status",
  width: 120,
  valueGetter: (params: ValueGetterParams) => {
    // Compute status from multiple fields
    const { isActive, lastLogin } = params.row;
    if (!isActive) return "inactive";
    
    const daysSinceLogin = (Date.now() - new Date(lastLogin).getTime()) / (1000 * 60 * 60 * 24);
    return daysSinceLogin > 30 ? "stale" : "active";
  },
  valueFormatter: (params: ValueFormatterParams) => {
    return params.value?.toString().toUpperCase();
  },
};

Custom Cell Rendering

React components for custom cell content and interactions.

interface CellParams {
  /** The HTMLElement that triggered the event */
  element?: HTMLElement;
  /** The column field of the cell that triggered the event */
  field: string;
  /** The cell value */
  value: CellValue;
  /** A function that lets you get data from other columns */
  getValue: (field: string) => CellValue;
  /** The full set of data of the row that the current cell belongs to */
  data: RowData;
  /** The row model of the row that the current cell belongs to */
  rowModel: RowModel;
  /** The column of the row that the current cell belongs to */
  colDef: any;
  /** The row index of the row that the current cell belongs to */
  rowIndex: number;
  /** ApiRef that lets you manipulate the grid */
  api: any;
}

type RenderCellFunction = (params: CellParams) => React.ReactElement;

Usage Examples:

import React from "react";
import { Button, Chip } from "@material-ui/core";

// Button cell renderer
const actionColumn: ColDef = {
  field: "actions",
  headerName: "Actions",
  width: 150,
  sortable: false,
  renderCell: (params: CellParams) => (
    <Button
      variant="contained"
      color="primary"
      size="small"
      onClick={() => {
        console.log("Edit row:", params.row);
      }}
    >
      Edit
    </Button>
  ),
};

// Status chip renderer
const statusColumn: ColDef = {
  field: "status",
  headerName: "Status",
  width: 120,
  renderCell: (params: CellParams) => {
    const getColor = (status: string) => {
      switch (status) {
        case "active": return "primary";
        case "pending": return "default";
        case "inactive": return "secondary";
        default: return "default";
      }
    };

    return (
      <Chip
        label={params.value}
        color={getColor(params.value as string)}
        size="small"
      />
    );
  },
};

// Image cell renderer
const avatarColumn: ColDef = {
  field: "avatar",
  headerName: "Avatar",
  width: 80,
  sortable: false,
  renderCell: (params: CellParams) => (
    <img
      src={params.value}
      alt={`Avatar for ${params.row.name}`}
      style={{
        width: 40,
        height: 40,
        borderRadius: "50%",
        objectFit: "cover",
      }}
    />
  ),
};

Custom Header Rendering

React components for custom column header content.

interface ColParams {
  /** Column field name */
  field: string;
  /** Column definition */
  colDef: ColDef;
  /** Grid API reference */
  api: GridApi;
}

type RenderHeaderFunction = (params: ColParams) => React.ReactElement;

Usage Examples:

import React from "react";
import { IconButton, Tooltip } from "@material-ui/core";
import { InfoIcon } from "@material-ui/icons";

// Header with tooltip
const tooltipHeaderColumn: ColDef = {
  field: "complexData",
  headerName: "Complex Data",
  width: 150,
  renderHeader: (params: ColParams) => (
    <div style={{ display: "flex", alignItems: "center" }}>
      <span>{params.colDef.headerName}</span>
      <Tooltip title="This column contains complex calculated data">
        <IconButton size="small">
          <InfoIcon fontSize="small" />
        </IconButton>
      </Tooltip>
    </div>
  ),
};

// Header with custom styling
const styledHeaderColumn: ColDef = {
  field: "priority",
  headerName: "Priority",
  width: 100,
  renderHeader: (params: ColParams) => (
    <div style={{
      fontWeight: "bold",
      color: "#ff6b35",
      textTransform: "uppercase",
    }}>
      {params.colDef.headerName}
    </div>
  ),
};

Column Styling

CSS class application and dynamic styling for columns and cells.

type CellClassNamePropType = string | string[] | ((params: CellParams) => string | string[]);

interface CellClassRules {
  [className: string]: (params: CellParams) => boolean;
}

Usage Examples:

// Static cell class names
const styledColumn: ColDef = {
  field: "amount",
  headerName: "Amount",
  cellClassName: "currency-cell",
  headerClassName: ["header-bold", "header-right-align"],
};

// Dynamic cell class names
const conditionalStyleColumn: ColDef = {
  field: "status",
  headerName: "Status",
  cellClassName: (params: CellParams) => {
    return params.value === "active" ? "status-active" : "status-inactive";
  },
};

// Cell class rules
const ruleBasedColumn: ColDef = {
  field: "score",
  headerName: "Score",
  type: "number",
  cellClassRules: {
    "score-high": (params) => params.value > 80,
    "score-medium": (params) => params.value >= 50 && params.value <= 80,
    "score-low": (params) => params.value < 50,
  },
};

docs

api-reference.md

column-system.md

configuration-options.md

data-grid-component.md

event-handling.md

index.md

row-management.md

tile.json