diff --git a/packages/table/preview/mutableTable.tsx b/packages/table/preview/mutableTable.tsx index b349291cc7..29e878d6bd 100644 --- a/packages/table/preview/mutableTable.tsx +++ b/packages/table/preview/mutableTable.tsx @@ -78,6 +78,9 @@ const TRUNCATED_POPOVER_MODES: TruncatedPopoverMode[] = [ TruncatedPopoverMode.WHEN_TRUNCATED, ]; +const TRUNCATION_LENGTHS: number[] = [20, 80, 100, 1000]; +const TRUNCATION_LENGTH_DEFAULT_INDEX = 1; + const SLOW_LAYOUT_STACK_DEPTH = 120; const COLUMN_COUNT_DEFAULT_INDEX = 3; @@ -170,10 +173,12 @@ function contains(arr: any[], value: any) { export interface IMutableTableState { cellContent?: CellContent; cellTruncatedPopoverMode?: TruncatedPopoverMode; + cellTruncationLength?: number; enableBatchRendering?: boolean; enableCellEditing?: boolean; enableCellSelection?: boolean; enableCellTruncation?: boolean; + enableCellTruncationFixed?: boolean; enableCellWrap?: boolean; enableColumnCustomHeaders?: boolean; enableColumnNameEditing?: boolean; @@ -213,10 +218,12 @@ export interface IMutableTableState { const DEFAULT_STATE: IMutableTableState = { cellContent: CellContent.LONG_TEXT, cellTruncatedPopoverMode: TruncatedPopoverMode.WHEN_TRUNCATED, + cellTruncationLength: TRUNCATION_LENGTHS[TRUNCATION_LENGTH_DEFAULT_INDEX], enableBatchRendering: true, enableCellEditing: false, enableCellSelection: true, enableCellTruncation: false, + enableCellTruncationFixed: false, enableCellWrap: false, enableColumnCustomHeaders: true, enableColumnNameEditing: false, @@ -521,10 +528,10 @@ export class MutableTable extends React.Component<{}, IMutableTableState> { return ( {valueAsString} @@ -562,6 +569,15 @@ export class MutableTable extends React.Component<{}, IMutableTableState> { "enableCellTruncation", true, ); + const truncatedLengthMenu = this.renderSelectMenu( + "Length", + "cellTruncationLength", + TRUNCATION_LENGTHS, + this.toValueLabel, + this.handleNumberStateChange, + "enableCellTruncationFixed", + true, + ); return (
@@ -612,8 +628,11 @@ export class MutableTable extends React.Component<{}, IMutableTableState> {
Interactions
{this.renderSwitch("Editing", "enableCellEditing")} {this.renderSwitch("Selection", "enableCellSelection")} +
Text Layout
{this.renderSwitch("Truncation", "enableCellTruncation", "enableCellEditing", false)}
{truncatedPopoverModeMenu}
+ {this.renderSwitch("Fixed Truncation", "enableCellTruncationFixed", "enableCellTruncation", true)} +
{truncatedLengthMenu}
{this.renderSwitch("Wrap Text", "enableCellWrap")}

Page