Themes
Advanced
Utils
Components

DataGrid

대규모 데이터 처리를 위한 Grid 컴포넌트

View sourceReport an issueView in Playground
ID
Title
0
Example 1
1
Example 2
2
Example 3
// 컬럼 정의

() => {

	const columns = [

  { key: 'id', name: 'ID' },

  { key: 'title', name: 'Title' },

  { key: 'count', name: 'Count' },

  { key: 'count', name: 'Count' },

  { key: 'count', name: 'Count' },

  { key: 'count', name: 'Count' },

  { key: 'count', name: 'Count' }

]



// 행 데이터

const rows = [

  { id: 0, title: 'Example 1', count: 20 },

  { id: 1, title: 'Example 2', count: 40 },

  { id: 2, title: 'Example 3', count: 60 }

]





	return (

		<div style={{ height: '300px', padding: '30PX' }}>

			<DataGrid.DataGrid columns={columns} rows={rows} />

		</div>

	)

}

Components

이 컴포넌트는 react-data-grid를 기반으로 지원합니다.

DataGrid.DataGrid

PropTypeDefault
columns*
readonly Column<R, SR>[]
No default value
rows*
readonly R[]
No default value
topSummaryRows
Maybe<readonly SR[]>
No default value
bottomSummaryRows
Maybe<readonly SR[]>
No default value
rowKeyGetter
Maybe<(row: R) => K>
No default value
onRowsChange
Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>
No default value
rowHeight
Maybe<number | ((row: R) => number)>
35
headerRowHeight
Maybe<number>
35
summaryRowHeight
Maybe<number>
35
columnWidths
Maybe<ColumnWidths>
No default value
onColumnWidthsChange
Maybe<(columnWidths: ColumnWidths) => void>
No default value
selectedRows
Maybe<ReadonlySet<K>>
No default value
isRowSelectionDisabled
Maybe<(row: NoInfer<R>) => boolean>
No default value
onSelectedRowsChange
Maybe<(selectedRows: Set<K>) => void>
No default value
sortColumns
Maybe<readonly SortColumn[]>
No default value
onSortColumnsChange
Maybe<(sortColumns: SortColumn[]) => void>
No default value
defaultColumnOptions
Maybe<DefaultColumnOptions<R, SR>>
No default value
onFill
Maybe<(event: FillEvent<R>) => R>
No default value
onCellMouseDown
Maybe<(args: CellMouseArgs<R, SR>, event: CellMouseEvent) => void>
No default value
onCellClick
Maybe<(args: CellMouseArgs<R, SR>, event: CellMouseEvent) => void>
No default value
onCellDoubleClick
Maybe<(args: CellMouseArgs<R, SR>, event: CellMouseEvent) => void>
No default value
onCellContextMenu
Maybe<(args: CellMouseArgs<R, SR>, event: CellMouseEvent) => void>
No default value
onCellKeyDown
Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>
No default value
onCellCopy
Maybe<(args: CellCopyArgs<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => void>
No default value
onCellPaste
Maybe<(args: CellPasteArgs<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => void>
No default value
onSelectedCellChange
Maybe<(args: CellSelectArgs<R, SR>) => void>
No default value
onScroll
Maybe<(event: React.UIEvent<HTMLDivElement>) => void>
No default value
onColumnResize
Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>
No default value
onColumnsReorder
Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>
No default value
enableVirtualization
Maybe<boolean>
No default value
renderers
Maybe<Renderers<R, SR>>
No default value
rowClass
Maybe<(row: R, rowIdx: number) => Maybe<string>>
No default value
headerRowClass
Maybe<string>
No default value
direction
'ltr' | 'rtl'
ltr
className
string | undefined
No default value
style
CSSProperties | undefined
No default value
aria-label
string | undefined
No default value
aria-labelledby
string | undefined
No default value
aria-description
string | undefined
No default value
aria-describedby
string | undefined
No default value
data-testid
Maybe<string>
No default value

DataGrid.TreeDataGrid

행 그룹화를 위한 컴포넌트

PropTypeDefault
groupBy
Maybe<readonly string[]>
No default value
rowGrouper
Maybe<(rows: readonly R[], columnKey: string) => Record<string, readonly R[]>>
No default value
expandedGroupIds
Maybe<ReadonlySet<unknown>>
No default value
onExpandedGroupIdsChange
Maybe<(expandedGroupIds: Set<unknown>) => void>
No default value
groupIdGetter
Maybe<(groupKey: string, parentId?: string) => string>
No default value
groupBy
Maybe<readonly string[]>
No default value
PreviousDialog
NextDatepicker
Edit this page on GitHub.