From 6ab52c483d7b663172030cb0715077a144aa54a9 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Wed, 10 May 2017 16:29:53 -0700
Subject: [PATCH] Right align numbers on TableSimple
---
.../visualizations/components/TableSimple.jsx | 27 ++++++++++++-------
1 file changed, 18 insertions(+), 9 deletions(-)
diff --git a/frontend/src/metabase/visualizations/components/TableSimple.jsx b/frontend/src/metabase/visualizations/components/TableSimple.jsx
index c79e1791020..08eaf523bf9 100644
--- a/frontend/src/metabase/visualizations/components/TableSimple.jsx
+++ b/frontend/src/metabase/visualizations/components/TableSimple.jsx
@@ -11,7 +11,7 @@ import Icon from "metabase/components/Icon.jsx";
import { formatValue } from "metabase/lib/formatting";
import { getFriendlyName } from "metabase/visualizations/lib/utils";
-import { getTableCellClickedObject } from "metabase/visualizations/lib/table";
+import { getTableCellClickedObject, isColumnRightAligned } from "metabase/visualizations/lib/table";
import cx from "classnames";
import _ from "underscore";
@@ -97,7 +97,14 @@ export default class TableSimple extends Component<*, Props, State> {
<thead ref="header">
<tr>
{cols.map((col, colIndex) =>
- <th key={colIndex} className={cx("TableInteractive-headerCellData cellData text-brand-hover", { "TableInteractive-headerCellData--sorted": sortColumn === colIndex })} onClick={() => this.setSort(colIndex)}>
+ <th
+ key={colIndex}
+ className={cx("TableInteractive-headerCellData cellData text-brand-hover", {
+ "TableInteractive-headerCellData--sorted": sortColumn === colIndex,
+ "text-right": isColumnRightAligned(col)
+ })}
+ onClick={() => this.setSort(colIndex)}
+ >
<div className="relative">
<Icon
name={sortDescending ? "chevrondown" : "chevronup"}
@@ -120,14 +127,16 @@ export default class TableSimple extends Component<*, Props, State> {
<td
key={columnIndex}
style={{ whiteSpace: "nowrap" }}
- className={cx("px1 border-bottom", {
- "cursor-pointer text-brand-hover": isClickable
- })}
- onClick={isClickable && ((e) => {
- onVisualizationClick({ ...clicked, element: e.currentTarget });
- })}
+ className={cx("px1 border-bottom", { "text-right": isColumnRightAligned(cols[columnIndex]) })}
>
- { cell == null ? "-" : formatValue(cell, { column: cols[columnIndex], jsx: true }) }
+ <span
+ className={cx({ "cursor-pointer text-brand-hover": isClickable })}
+ onClick={isClickable && ((e) => {
+ onVisualizationClick({ ...clicked, element: e.currentTarget });
+ })}
+ >
+ { cell == null ? "-" : formatValue(cell, { column: cols[columnIndex], jsx: true }) }
+ </span>
</td>
);
})}
--
GitLab