[table] feat: ColumnHeaderCell2, TruncatedFormat2, JSONFormat2

packages/demo-app/src/examples/TableExample.tsx

@@ -16,7 +16,7 @@
 
 import * as React from "react";
 
-import { Cell, Column, ColumnHeaderCell, Table2 } from "@blueprintjs/table";
+import { Cell, Column, ColumnHeaderCell2, Table2 } from "@blueprintjs/table";
 
 import { ExampleCard } from "./ExampleCard";
 
@@ -27,7 +27,7 @@ export const TableExample = React.memo(() => {
         [],
     );
     const columnHeaderCellRenderer = React.useCallback(
-        (index: number) => <ColumnHeaderCell name={`Column ${index}`} />,
+        (index: number) => <ColumnHeaderCell2 name={`Column ${index}`} />,
         [],
     );
     return (

packages/docs-app/src/examples/table-examples/cellLoadingExample.tsx

@@ -17,7 +17,7 @@ import * as React from "react";
 
 import { RadioGroup } from "@blueprintjs/core";
 import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
-import { Cell, Column, ColumnHeaderCell, RowHeaderCell, Table2 } from "@blueprintjs/table";
+import { Cell, Column, ColumnHeaderCell2, RowHeaderCell, Table2 } from "@blueprintjs/table";
 
 interface IBigSpaceRock {
     [key: string]: number | string;
@@ -122,7 +122,7 @@ export class CellLoadingExample extends React.PureComponent<IExampleProps, ICell
         const formattedColumnName = columnName
             .replace(/([A-Z])/g, " $1")
             .replace(/^./, firstCharacter => firstCharacter.toUpperCase());
-        return <ColumnHeaderCell loading={this.isLoading(0, columnIndex + 1)} name={formattedColumnName} />;
+        return <ColumnHeaderCell2 loading={this.isLoading(0, columnIndex + 1)} name={formattedColumnName} />;
     };
 
     private renderRowHeaderCell = (rowIndex: number) => {

packages/docs-app/src/examples/table-examples/tableDollarExample.tsx

@@ -18,7 +18,7 @@ import * as React from "react";
 
 import { Classes } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
-import { Cell, Column, ColumnHeaderCell, Table2 } from "@blueprintjs/table";
+import { Cell, Column, ColumnHeaderCell2, Table2 } from "@blueprintjs/table";
 
 // this will obviously get outdated, it's valid only as of August 2021
 const USD_TO_EURO_CONVERSION = 0.85;
@@ -42,7 +42,7 @@ export class TableDollarExample extends React.PureComponent<IExampleProps> {
 
 function renderColumnHeader(index: number) {
     const name = ["Dollars", "Euros"][index]!;
-    return <ColumnHeaderCell name={name} index={index} nameRenderer={renderName} />;
+    return <ColumnHeaderCell2 name={name} index={index} nameRenderer={renderName} />;
 }
 
 function renderName(name: string) {

packages/docs-app/src/examples/table-examples/tableEditableExample.tsx

@@ -18,7 +18,7 @@ import * as React from "react";
 
 import { Intent } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
-import { Column, ColumnHeaderCell, EditableCell2, EditableName, Table2 } from "@blueprintjs/table";
+import { Column, ColumnHeaderCell2, EditableCell2, EditableName, Table2 } from "@blueprintjs/table";
 
 export interface ITableEditableExampleState {
     columnNames?: string[];
@@ -83,7 +83,7 @@ export class TableEditableExample extends React.PureComponent<IExampleProps, ITa
                 />
             );
         };
-        return <ColumnHeaderCell name={this.state.columnNames[columnIndex]} nameRenderer={nameRenderer} />;
+        return <ColumnHeaderCell2 name={this.state.columnNames[columnIndex]} nameRenderer={nameRenderer} />;
     };
 
     private isValidValue(value: string) {

packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx

@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
-import { Cell, Column, JSONFormat, Table2, TruncatedFormat } from "@blueprintjs/table";
+import { Cell, Column, JSONFormat2, Table2, TruncatedFormat2 } from "@blueprintjs/table";
 
 interface ITimezone {
     name: string;
@@ -113,14 +113,14 @@ export class TableFormatsExample extends React.PureComponent<IExampleProps> {
         });
         return (
             <Cell>
-                <TruncatedFormat>{formattedDateTime}</TruncatedFormat>
+                <TruncatedFormat2 detectTruncation={true}>{formattedDateTime}</TruncatedFormat2>
             </Cell>
         );
     };
 
     private renderJSON = (row: number) => (
         <Cell>
-            <JSONFormat>{this.data[row]}</JSONFormat>
+            <JSONFormat2 detectTruncation={true}>{this.data[row]}</JSONFormat2>
         </Cell>
     );
 }

packages/docs-app/src/examples/table-examples/tableSortableExample.tsx

@@ -24,7 +24,7 @@ import { MenuItem2 } from "@blueprintjs/popover2";
 import {
     Cell,
     Column,
-    ColumnHeaderCell,
+    ColumnHeaderCell2,
     CopyCellsMenuItem,
     IMenuContext,
     SelectionModes,
@@ -50,7 +50,7 @@ abstract class AbstractSortableColumn implements ISortableColumn {
             <Cell>{getCellData(rowIndex, columnIndex)}</Cell>
         );
         const menuRenderer = this.renderMenu.bind(this, sortColumn);
-        const columnHeaderCellRenderer = () => <ColumnHeaderCell name={this.name} menuRenderer={menuRenderer} />;
+        const columnHeaderCellRenderer = () => <ColumnHeaderCell2 name={this.name} menuRenderer={menuRenderer} />;
         return (
             <Column
                 cellRenderer={cellRenderer}

packages/table-dev-app/src/features.tsx

@@ -25,13 +25,13 @@ import { MenuItem2 } from "@blueprintjs/popover2";
 import {
     Cell,
     Column,
-    ColumnHeaderCell,
+    ColumnHeaderCell2,
+    ColumnHeaderCellProps,
     CopyCellsMenuItem,
     EditableCell2,
     EditableName,
-    IColumnHeaderCellProps,
     IMenuContext,
-    JSONFormat,
+    JSONFormat2,
     Region,
     RegionCardinality,
     Regions,
@@ -153,19 +153,19 @@ class FormatsTable extends React.Component {
 
     private renderJSONCell = (row: number) => (
         <Cell>
-            <JSONFormat preformatted={true}>{this.objects[row]}</JSONFormat>
+            <JSONFormat2 preformatted={true}>{this.objects[row]}</JSONFormat2>
         </Cell>
     );
 
     private renderJSONCellWrappedText = (row: number) => (
         <Cell wrapText={true}>
-            <JSONFormat preformatted={true}>{this.objects[row]}</JSONFormat>
+            <JSONFormat2 preformatted={true}>{this.objects[row]}</JSONFormat2>
         </Cell>
     );
 
     private renderJSONWrappedCell = (row: number) => (
         <Cell>
-            <JSONFormat preformatted={false}>{this.objects[row]}</JSONFormat>
+            <JSONFormat2 preformatted={false}>{this.objects[row]}</JSONFormat2>
         </Cell>
     );
 }
@@ -238,7 +238,7 @@ class EditableTable extends React.Component<{}, IEditableTableState> {
             );
         };
         return (
-            <ColumnHeaderCell
+            <ColumnHeaderCell2
                 menuRenderer={renderTestMenu}
                 name={this.state.names[columnIndex]}
                 nameRenderer={nameRenderer}
@@ -512,7 +512,7 @@ ReactDOM.render(
         7,
         {
             columnHeaderCellRenderer: (columnIndex: number) => {
-                return <ColumnHeaderCell name={Utils.toBase26Alpha(columnIndex)} isActive={columnIndex % 3 === 0} />;
+                return <ColumnHeaderCell2 name={Utils.toBase26Alpha(columnIndex)} isActive={columnIndex % 3 === 0} />;
             },
         },
         {
@@ -535,13 +535,13 @@ ReactDOM.render(
             columnHeaderCellRenderer: (columnIndex: number) => {
                 const alpha = Utils.toBase26Alpha(columnIndex);
                 return (
-                    <ColumnHeaderCell
+                    <ColumnHeaderCell2
                         name={`${alpha} Column with a substantially long header name`}
                         menuRenderer={renderTestMenu}
                     >
                         <H4>Header {alpha}</H4>
                         <p>Whatever interactive header content goes here lorem ipsum.</p>
-                    </ColumnHeaderCell>
+                    </ColumnHeaderCell2>
                 );
             },
         },
@@ -554,9 +554,9 @@ ReactDOM.render(
     document.getElementById("table-6"),
 );
 
-class CustomHeaderCell extends React.Component<IColumnHeaderCellProps> {
+class CustomHeaderCell extends React.Component<ColumnHeaderCellProps> {
     public render() {
-        return <ColumnHeaderCell {...this.props}>Hey dawg.</ColumnHeaderCell>;
+        return <ColumnHeaderCell2 {...this.props}>Hey dawg.</ColumnHeaderCell2>;
     }
 }
 
@@ -687,7 +687,7 @@ ReactDOM.render(<ReorderableTableExample />, document.getElementById("table-10")
 ReactDOM.render(
     <div style={{ height: 335, width: 300 }}>
         <Table2 numRows={10} defaultRowHeight={30} enableGhostCells={true}>
-            <Column columnHeaderCellRenderer={() => <ColumnHeaderCell nameRenderer={renderName} />} />
+            <Column columnHeaderCellRenderer={() => <ColumnHeaderCell2 nameRenderer={renderName} />} />
         </Table2>
     </div>,
     document.getElementById("table-11"),

packages/table-dev-app/src/index.scss

@@ -4,72 +4,71 @@
 @import "~normalize.css/normalize.css";
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
+@import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 @import "~@blueprintjs/table/src/table";
 
-// TODO: convert below CSS to SCSS
-/* stylelint-disable */
-
 body {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
+
+  background-color: $pt-app-background-color;
   bottom: 0;
+  left: 0;
 
   margin: 0;
   padding: 0;
-
-  background-color: $pt-app-background-color;
+  position: absolute;
+  right: 0;
+  top: 0;
 
   .#{$ns}-dark {
     background-color: $pt-dark-app-background-color;
   }
 }
 
+/* stylelint-disable-next-line selector-max-id */
 #page-content {
-  position: absolute;
-  top: $pt-navbar-height;
-  left: 0;
   bottom: 0;
+  left: 0;
+  position: absolute;
   right: 0;
+  top: $pt-navbar-height;
 }
 
 /**
   * A simple filling layout that DOES NOT create a layout boundary (due to `display: inline-block`)
   */
 .layout-passthrough-fill {
   display: inline-block;
-  width: 100%;
   height: 100%;
   position: relative;
+  width: 100%;
 }
 
 /**
   * A simple filling layout that DOES create a layout boundary.
   * See: http://wilsonpage.co.uk/introducing-layout-boundaries/
   */
 .layout-boundary {
-  display: block;
-  position: absolute;
-  top: 0;
   bottom: 0;
+  display: block;
   left: 0;
-  right: 0;
   overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .container {
   display: flex;
-  overflow: hidden;
   height: 100%;
+  overflow: hidden;
 }
 
 .table {
   flex: 1 1 auto;
   order: 2;
-  z-index: 2;
   overflow: hidden;
   position: relative;
+  z-index: 2;
 
   &.is-inline {
     margin-left: -12.5%;
@@ -98,7 +97,6 @@ body {
 
   h6.#{$ns}-heading {
     color: $pt-text-color-muted;
-    font-weight: normal;
     padding: 10px 0 3px;
   }
 
@@ -112,8 +110,8 @@ body {
   }
 
   .tbl-select-label {
-    margin-top: -3px;
     margin-bottom: 7px;
+    margin-top: -3px;
 
     .#{$ns}-html-select {
       float: right;
@@ -129,15 +127,16 @@ body {
   }
 
   .#{$ns}-dark & {
-    z-index: 1;
     background-color: $dark-gray2;
     color: $dark-gray2;
+    z-index: 1;
 
     h6.#{$ns}-heading {
       color: $pt-dark-text-color-muted;
     }
   }
 }
+
 .sidebar-indented-group {
   margin-left: $pt-grid-size;
 }
@@ -147,18 +146,18 @@ body {
 }
 
 .tbl-styled-region-success {
-  border: 1px solid $pt-intent-success;
   background-color: rgba($pt-intent-success, 0.1);
+  border: 1px solid $pt-intent-success;
 }
 
 .tbl-styled-region-warning {
-  border: 1px solid $pt-intent-warning;
   background-color: rgba($pt-intent-warning, 0.1);
+  border: 1px solid $pt-intent-warning;
 }
 
 .tbl-styled-region-danger {
-  border: 1px solid $pt-intent-danger;
   background-color: rgba($pt-intent-danger, 0.1);
+  border: 1px solid $pt-intent-danger;
 }
 
 .tbl-custom-column-header {