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

configuration-options.mddocs/

Configuration Options

Grid configuration options control appearance, behavior, and functionality. The community edition provides most configuration options with some restrictions on pagination and selection features.

Capabilities

Grid Options Interface

Complete configuration interface for customizing grid behavior and appearance.

/**
 * Comprehensive grid configuration options
 * Community edition excludes pagination, disableMultipleColumnsSorting, and disableMultipleSelection
 */
interface GridOptions {
  /** Dynamic height that adjusts to content (default: false) */
  autoHeight?: boolean;
  /** Height of each row in pixels (default: 52) */
  rowHeight: number;
  /** Height of column headers in pixels (default: 56) */
  headerHeight: number;
  /** Width/height of scrollbars in pixels (default: 15) */
  scrollbarSize: number;
  /** Number of columns rendered outside viewport for performance (default: 2) */
  columnBuffer: number;
  /** Disable multiple row selection - not available in community edition */
  disableMultipleSelection?: boolean;
  /** Disable multiple column sorting - not available in community edition */
  disableMultipleColumnsSorting?: boolean;
  /** Show right border on cells (default: false) */
  showCellRightBorder?: boolean;
  /** Show right border on column headers (default: false) */
  showColumnRightBorder?: boolean;
  /** Prevent rows from extending full width (default: false) */
  disableExtendRowFullWidth?: boolean;
  /** Sort direction sequence (default: ['asc', 'desc', null]) */
  sortingOrder: SortDirection[];
  /** Enable pagination - always true in community edition */
  pagination?: boolean;
  /** Number of rows per page (default: 100, max: 100) */
  pageSize?: number;
  /** Calculate page size automatically based on container height (default: false) */
  autoPageSize?: boolean;
  /** Available page size options (default: [25, 50, 100]) */
  rowsPerPageOptions?: number[];
  /** Pagination processing mode: 'client' or 'server' */
  paginationMode?: FeatureMode;
  /** Total row count when different from rows array length */
  rowCount?: number;
  /** Current page number (default: 1) */
  page?: number;
  /** Sorting processing mode: 'client' or 'server' */
  sortingMode?: FeatureMode;
  /** Hide entire footer (default: false) */
  hideFooter?: boolean;
  /** Hide row count in footer (default: false) */
  hideFooterRowCount?: boolean;
  /** Hide selected row count in footer (default: false) */
  hideFooterSelectedRowCount?: boolean;
  /** Hide pagination controls in footer (default: false) */
  hideFooterPagination?: boolean;
  /** Add checkbox column for row selection (default: false) */
  checkboxSelection?: boolean;
  /** Disable row selection on click (default: false) */
  disableSelectionOnClick?: boolean;
  /** Custom logger implementation */
  logger?: Logger;
  /** Logging level or false to disable (default: 'warn') */
  logLevel?: string | false;
  /** Initial sort configuration */
  sortModel?: SortModel;
  /** Icon set configuration */
  icons: IconsOptions;
  /** Custom column type definitions */
  columnTypes: ColumnTypesRecord;
}

type FeatureMode = "client" | "server";
type SortDirection = "asc" | "desc" | null;

Usage Examples:

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

// Basic configuration
function BasicConfigGrid() {
  const gridOptions: Partial<GridOptions> = {
    rowHeight: 60,
    headerHeight: 70,
    checkboxSelection: true,
    pageSize: 25,
    rowsPerPageOptions: [25, 50, 100],
  };

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

// Advanced configuration
function AdvancedConfigGrid() {
  const [pageSize, setPageSize] = React.useState(50);
  
  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        autoHeight={false}
        rowHeight={48}
        headerHeight={64}
        showCellRightBorder={true}
        showColumnRightBorder={true}
        pageSize={pageSize}
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
        rowsPerPageOptions={[25, 50, 100]}
        sortingOrder={['desc', 'asc', null]}
        checkboxSelection
        disableSelectionOnClick={false}
        hideFooterSelectedRowCount={false}
      />
    </div>
  );
}

Height and Sizing Options

Configuration for grid dimensions and row sizing.

interface SizingOptions {
  /** Dynamic height that adjusts to content */
  autoHeight?: boolean;
  /** Fixed height of each row in pixels */
  rowHeight: number;
  /** Height of column header row in pixels */
  headerHeight: number;
  /** Size of scrollbars in pixels */
  scrollbarSize: number;
  /** Number of off-screen columns to render for smooth scrolling */
  columnBuffer: number;
}

Usage Examples:

// Auto-height grid that grows with content
function AutoHeightGrid() {
  return (
    <div style={{ width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        autoHeight={true}
        rowHeight={40}
        headerHeight={50}
      />
    </div>
  );
}

// Fixed height with custom row sizing
function CustomSizedGrid() {
  return (
    <div style={{ height: 500, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        autoHeight={false}
        rowHeight={72} // Taller rows for more content
        headerHeight={80} // Taller headers
        scrollbarSize={12} // Thinner scrollbars
        columnBuffer={3} // Render more off-screen columns
      />
    </div>
  );
}

Pagination Configuration

Settings for pagination behavior and appearance.

interface PaginationOptions {
  /** Enable pagination (always true in community edition) */
  pagination?: boolean;
  /** Rows per page (max 100 in community edition) */  
  pageSize?: number;
  /** Auto-calculate page size based on container height */
  autoPageSize?: boolean;
  /** Available page size options for user selection */
  rowsPerPageOptions?: number[];
  /** Processing mode: client-side or server-side */
  paginationMode?: FeatureMode;
  /** Total row count for server-side pagination */
  rowCount?: number;
  /** Current page number (1-based) */
  page?: number;
}

const MAX_PAGE_SIZE = 100; // Community edition limit

Usage Examples:

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

// Client-side pagination
function ClientPaginationGrid() {
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(25);

  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pagination={true}
        pageSize={pageSize}
        page={page}
        rowsPerPageOptions={[10, 25, 50, 100]}
        paginationMode="client"
        onPageChange={(params) => setPage(params.page)}
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
      />
    </div>
  );
}

// Server-side pagination
function ServerPaginationGrid() {
  const [loading, setLoading] = React.useState(false);
  const [rows, setRows] = React.useState([]);
  const [rowCount, setRowCount] = React.useState(0);
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(25);

  const fetchData = React.useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch(`/api/data?page=${page}&pageSize=${pageSize}`);
      const data = await response.json();
      setRows(data.rows);
      setRowCount(data.total);
    } finally {
      setLoading(false);
    }
  }, [page, pageSize]);

  React.useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        loading={loading}
        pagination={true}
        pageSize={pageSize}
        page={page}
        rowCount={rowCount}
        paginationMode="server"
        onPageChange={(params) => setPage(params.page)}
        onPageSizeChange={(params) => setPageSize(params.pageSize)}
      />
    </div>
  );
}

Sorting Configuration

Settings for column sorting behavior and appearance.

interface SortingOptions {
  /** Sort direction sequence when clicking column headers */
  sortingOrder: SortDirection[];
  /** Processing mode: client-side or server-side */
  sortingMode?: FeatureMode;
  /** Initial sort configuration */
  sortModel?: SortModel;
  /** Disable multiple column sorting (always true in community edition) */
  disableMultipleColumnsSorting?: boolean;
}

interface SortModel {
  /** Column field to sort by */
  field: string;
  /** Sort direction */
  sort: SortDirection;
}

type SortDirection = "asc" | "desc" | null;

Usage Examples:

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

// Client-side sorting with custom order
function ClientSortingGrid() {
  const [sortModel, setSortModel] = React.useState<SortModel[]>([
    { field: "name", sort: "asc" }
  ]);

  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        sortingOrder={['asc', 'desc', null]} // Default order
        sortingMode="client"
        sortModel={sortModel}
        onSortModelChange={(params) => {
          setSortModel(params.sortModel);
          console.log("New sort model:", params.sortModel);
        }}
      />
    </div>
  );
}

// Server-side sorting
function ServerSortingGrid() {
  const [loading, setLoading] = React.useState(false);
  const [rows, setRows] = React.useState([]);
  const [sortModel, setSortModel] = React.useState<SortModel[]>([]);

  const fetchSortedData = React.useCallback(async () => {
    setLoading(true);
    try {
      const sortParam = sortModel.length > 0 
        ? `&sortBy=${sortModel[0].field}&sortOrder=${sortModel[0].sort}`
        : '';
      
      const response = await fetch(`/api/data?${sortParam}`);
      const data = await response.json();
      setRows(data);
    } finally {
      setLoading(false);
    }
  }, [sortModel]);

  React.useEffect(() => {
    fetchSortedData();
  }, [fetchSortedData]);

  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        loading={loading}
        sortingMode="server"
        sortModel={sortModel}
        onSortModelChange={(params) => setSortModel(params.sortModel)}
      />
    </div>
  );
}

Selection Configuration

Settings for row selection behavior and appearance.

interface SelectionOptions {
  /** Add checkbox column for row selection */
  checkboxSelection?: boolean;
  /** Disable row selection on row/cell click */
  disableSelectionOnClick?: boolean;
  /** Disable multiple row selection (always true in community edition) */
  disableMultipleSelection?: boolean;
}

Usage Examples:

// Selection with checkboxes
function CheckboxSelectionGrid() {
  const [selectedRows, setSelectedRows] = React.useState([]);

  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection={true}
        disableSelectionOnClick={false}
        onSelectionChange={(params) => {
          setSelectedRows(params.selectionModel);
        }}
      />
      <div>Selected: {selectedRows.length} rows</div>
    </div>
  );
}

// Selection disabled on click
function ClickDisabledGrid() {
  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection={true}
        disableSelectionOnClick={true} // Only checkbox selection
      />
    </div>
  );
}

Appearance Options

Visual customization settings for borders, styling, and layout.

interface AppearanceOptions {
  /** Show right border on data cells */
  showCellRightBorder?: boolean;
  /** Show right border on column headers */
  showColumnRightBorder?: boolean;
  /** Prevent rows from extending to full container width */
  disableExtendRowFullWidth?: boolean;
}

Usage Examples:

// Grid with borders
function BorderedGrid() {
  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        showCellRightBorder={true}
        showColumnRightBorder={true}
        disableExtendRowFullWidth={false}
      />
    </div>
  );
}

Footer Configuration

Settings for footer visibility and content.

interface FooterOptions {
  /** Hide entire footer section */
  hideFooter?: boolean;
  /** Hide total row count display */
  hideFooterRowCount?: boolean;
  /** Hide selected row count display */
  hideFooterSelectedRowCount?: boolean;
  /** Hide pagination controls */
  hideFooterPagination?: boolean;
}

Usage Examples:

// Minimal footer
function MinimalFooterGrid() {
  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        hideFooterSelectedRowCount={true}
        hideFooterRowCount={false}
        hideFooterPagination={false}
      />
    </div>
  );
}

// No footer
function NoFooterGrid() {
  return (
    <div style={{ height: 600, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        hideFooter={true}
      />
    </div>
  );
}

Default Configuration

The default configuration object used by the grid.

/**
 * Default grid options applied when not specified
 * These values are used as fallbacks for undefined options
 */
const DEFAULT_GRID_OPTIONS: GridOptions = {
  rowHeight: 52,
  headerHeight: 56,
  scrollbarSize: 15,
  columnBuffer: 2,
  rowsPerPageOptions: [25, 50, 100],
  pageSize: 100,
  paginationMode: "client",
  sortingMode: "client",
  sortingOrder: ['asc', 'desc', null],
  logLevel: 'warn',
  columnTypes: DEFAULT_COLUMN_TYPES,
  icons: {
    columnSortedAscending: ArrowUpwardIcon,
    columnSortedDescending: ArrowDownwardIcon,
    columnResize: SeparatorIcon,
  },
};

docs

api-reference.md

column-system.md

configuration-options.md

data-grid-component.md

event-handling.md

index.md

row-management.md

tile.json