Skip to content

MUI X

Installation

Using your favorite package manager, install @mui/x-data-grid-pro or @mui/x-data-grid-premium for the commercial version, or @mui/x-data-grid for the free community version. 

// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid

Simple example 

import * as React from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

컬럼 클릭시 정렬 방법

컬럼 클릭시 출력되는 정렬 방법에 대한 메서드는 sortComparator를 사용하면 된다: 

const columns = [
  { field: 'name' },
  { field: 'age', type: 'number' },
  {
    field: 'username',
    valueGetter: (params) =>
      `${params.getValue(params.id, 'name') || 'unknown'} - ${
        params.getValue(params.id, 'age') || 'x'
      }`,
    sortComparator: (v1, v2, param1, param2) =>
      param1.api.getCellValue(param1.id, 'age') -
      param2.api.getCellValue(param2.id, 'age'),
    width: 150,
  },
  { field: 'dateCreated', type: 'date', width: 180 },
  { field: 'lastLogin', type: 'dateTime', width: 180 },
];

Flexible column width

특정 컬럼이 남은 공간을 전부 차지하도록 적용하는 방법은, flex 속성을 사용하면 된다: 

columns={[ { field: 'id', flex: 1, minWidth: 150, }]}

See also

Favorite site