Add column title setting

frontend/src/metabase/visualizations/components/TableInteractive.jsx

@@ -8,7 +8,7 @@ import "./TableInteractive.css";
 
 import Icon from "metabase/components/Icon.jsx";
 
-import { formatValue, formatColumn } from "metabase/lib/formatting";
+import { formatValue } from "metabase/lib/formatting";
 import { isID } from "metabase/lib/schema_metadata";
 import {
   getTableCellClickedObject,
@@ -443,11 +443,11 @@ export default class TableInteractive extends Component {
   }
 
   tableHeaderRenderer = ({ key, style, columnIndex }: CellRendererProps) => {
-    const { sort, isPivoted } = this.props;
+    const { sort, isPivoted, settings } = this.props;
     const { cols } = this.props.data;
     const column = cols[columnIndex];
 
-    let columnTitle = formatColumn(column);
+    let columnTitle = settings.column(column).column_title;
     if (!columnTitle && this.props.isPivoted && columnIndex !== 0) {
       columnTitle = t`Unset`;
     }

frontend/src/metabase/visualizations/components/TableSimple.jsx

@@ -11,7 +11,7 @@ import Ellipsified from "metabase/components/Ellipsified.jsx";
 import Icon from "metabase/components/Icon.jsx";
 import MiniBar from "./MiniBar";
 
-import { formatColumn, formatValue } from "metabase/lib/formatting";
+import { formatValue } from "metabase/lib/formatting";
 import {
   getTableCellClickedObject,
   isColumnRightAligned,
@@ -153,7 +153,9 @@ export default class TableSimple extends Component {
                             marginRight: 3,
                           }}
                         />
-                        <Ellipsified>{formatColumn(col)}</Ellipsified>
+                        <Ellipsified>
+                          {settings.column(col).column_title}
+                        </Ellipsified>
                       </div>
                     </th>
                   ))}

frontend/src/metabase/visualizations/visualizations/Table.jsx

@@ -7,6 +7,7 @@ import TableSimple from "../components/TableSimple.jsx";
 import { t } from "c-3po";
 import * as DataGrid from "metabase/lib/data_grid";
 import { findColumnIndexForColumnSetting } from "metabase/lib/dataset";
+import { formatColumn } from "metabase/lib/formatting";
 
 import Query from "metabase/lib/query";
 import {
@@ -122,7 +123,13 @@ export default class Table extends Component {
   };
 
   static columnSettings = column => {
-    const settings = {};
+    const settings: SettingDefs = {
+      column_title: {
+        title: t`Column title`,
+        widget: "input",
+        getDefault: column => formatColumn(column),
+      },
+    };
     if (isNumber(column)) {
       settings["show_mini_bar"] = {
         title: t`Show a mini bar chart`,