import * as React from "react" ; import { Cell , Column , ColumnHeaderCell , Table2 } from "@blueprintjs/table" ; import { ExampleCard } from "./ExampleCard" ; const WIDTH = 600 ; export const TableExample = React . memo ( ( ) => { const cellRenderer = React . useCallback ( ( rowIndex , columnIndex ) => < Cell > { `${ rowIndex }, ${ columnIndex }` } < /Cell>, []); const columnHeaderCellRenderer = React . useCallback ( ( index ) => < ColumnHeaderCell name = { `Column ${ index }` } />, []); return ( < ExampleCard width = { WIDTH } horizontal = { true } label = "Table" > < Table2 numRows = { 4 } > < Column cellRenderer = { cellRenderer } columnHeaderCellRenderer = { columnHeaderCellRenderer } key = "column-1" / > < Column cellRenderer = { cellRenderer } columnHeaderCellRenderer = { columnHeaderCellRenderer } key = "column-2" / > < Column cellRenderer = { cellRenderer } columnHeaderCellRenderer = { columnHeaderCellRenderer } key = "column-2" / > < /Table2> < /ExampleCard>); } ) ; TableExample . displayName = "TableExample" ;