diff --git a/packages/table/preview/index.html b/packages/table/preview/index.html index d346247e64..0d799bba8b 100644 --- a/packages/table/preview/index.html +++ b/packages/table/preview/index.html @@ -95,8 +95,8 @@ color: #A7B6C2; } - .sidebar label:last-child { - margin-bottom: 0; + .sidebar-indented-group { + margin-left: 15px; } label.tbl-select-label { @@ -126,6 +126,10 @@ border: 1px solid #DB3737; background-color: rgba(219, 55, 55, 0.1); } + + .tbl-select-label.pt-disabled { + cursor: not-allowed; + } diff --git a/packages/table/preview/index.tsx b/packages/table/preview/index.tsx index 709b6dd833..208c60d763 100644 --- a/packages/table/preview/index.tsx +++ b/packages/table/preview/index.tsx @@ -12,6 +12,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { + Classes, FocusStyleManager, Menu, MenuDivider, @@ -31,6 +32,8 @@ import { RowHeaderCell, Table, TableLoadingOption, + TruncatedFormat, + TruncatedPopoverMode, Utils, } from "../src/index"; @@ -51,8 +54,10 @@ type IMutableStateUpdateCallback = interface IMutableTableState { cellContent?: CellContent; + cellTruncatedPopoverMode?: TruncatedPopoverMode; enableCellEditing?: boolean; enableCellSelection?: boolean; + enableCellTruncation?: boolean; enableColumnNameEditing?: boolean; enableColumnReordering?: boolean; enableColumnResizing?: boolean; @@ -65,6 +70,7 @@ interface IMutableTableState { enableRowSelection?: boolean; numCols?: number; numRows?: number; + selectedFocusStyle?: FocusStyle; showCallbackLogs?: boolean; showCellsLoading?: boolean; showColumnHeadersLoading?: boolean; @@ -72,7 +78,6 @@ interface IMutableTableState { showColumnMenus?: boolean; showCustomRegions?: boolean; showFocusCell?: boolean; - selectedFocusStyle?: FocusStyle; showGhostCells?: boolean; showInline?: boolean; showRowHeaders?: boolean; @@ -110,6 +115,12 @@ const CELL_CONTENTS = [ CellContent.LONG_TEXT, ]; +const TRUNCATED_POPOVER_MODES = [ + TruncatedPopoverMode.ALWAYS, + TruncatedPopoverMode.NEVER, + TruncatedPopoverMode.WHEN_TRUNCATED, +] as TruncatedPopoverMode[]; + const COLUMN_COUNT_DEFAULT_INDEX = 2; const ROW_COUNT_DEFAULT_INDEX = 3; @@ -136,8 +147,10 @@ class MutableTable extends React.Component<{}, IMutableTableState> { super(props, context); this.state = { cellContent: CellContent.CELL_NAMES, + cellTruncatedPopoverMode: TruncatedPopoverMode.WHEN_TRUNCATED, enableCellEditing: true, enableCellSelection: true, + enableCellTruncation: false, enableColumnNameEditing: true, enableColumnReordering: true, enableColumnResizing: true, @@ -162,6 +175,7 @@ class MutableTable extends React.Component<{}, IMutableTableState> { showInline: false, showRowHeaders: true, showRowHeadersLoading: false, + showZebraStriping: false, }; } @@ -221,6 +235,7 @@ class MutableTable extends React.Component<{}, IMutableTableState> { public componentDidUpdate() { this.syncFocusStyle(); + this.syncDependentBooleanStates(); } // Renderers @@ -333,20 +348,36 @@ class MutableTable extends React.Component<{}, IMutableTableState> { const isEvenRow = rowIndex % 2 === 0; const classes = classNames({ "tbl-zebra-stripe": this.state.showZebraStriping && isEvenRow }); - return this.state.enableCellEditing ? ( - - ) : ( - - {valueAsString} - - ); + />; + } else if (this.state.enableCellTruncation) { + return ( + + + {valueAsString} + + + ); + } else { + return ( + + {valueAsString} + + ); + } } private renderSidebar() { @@ -357,6 +388,16 @@ class MutableTable extends React.Component<{}, IMutableTableState> { this.toCellContentLabel, this.handleNumberStateChange, ); + const truncatedPopoverModeMenu = this.renderSelectMenu( + "Popover", + "cellTruncatedPopoverMode", + TRUNCATED_POPOVER_MODES, + this.toTruncatedPopoverModeLabel, + this.handleNumberStateChange, + "enableCellTruncation", + true, + ); + return (

Table

@@ -401,6 +442,11 @@ class MutableTable extends React.Component<{}, IMutableTableState> {
Interactions
{this.renderSwitch("Editing", "enableCellEditing")} {this.renderSwitch("Selection", "enableCellSelection")} + {this.renderSwitch("Truncation", "enableCellTruncation", "enableCellEditing", false)} + +
+ {truncatedPopoverModeMenu} +

Page

Display
@@ -409,23 +455,35 @@ class MutableTable extends React.Component<{}, IMutableTableState> { ); } - private renderSwitch(label: string, stateKey: keyof IMutableTableState) { - return ( - - ); + private renderSwitch( + label: string, + stateKey: keyof IMutableTableState, + prereqStateKey?: keyof IMutableTableState, + prereqStateKeyValue?: any, + ) { + const isDisabled = !this.isPrereqStateKeySatisfied(prereqStateKey, prereqStateKeyValue); + + const child = ; + + if (isDisabled) { + return this.wrapDisabledControlWithTooltip(child, prereqStateKey, prereqStateKeyValue); + } else { + return child; + } } private renderFocusStyleSelectMenu() { const { selectedFocusStyle } = this.state; return ( -