feat: add ColoredTable component

mll-lab · Jul 28, 2023 · d7eba9d · d7eba9d
1 parent 0bd1835
commit d7eba9d
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 0 deletions.
diff --git a/src/Table/index.tsx b/src/Table/index.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { MllSpinnerSvg } from '../Spinner';
 import { fontSizeFromTheme } from '../styled-utils';
+import { PALETTE } from '../theme';
 
 export {
   ColumnsType,
@@ -68,6 +69,127 @@ export function Table<
   );
 }
 
+/**
+ * ag-grid like variant of the default table, has more contrast with other page elements.
+ */
+export const ColoredTable = styled(Table)`
+  /* Always surround the entire table with a border */
+  border: 1px solid ${(props) => props.theme.borderColor};
+  border-radius: 2px;
+
+  /* Avoid other borders overlapping with the main border */
+  .mll-ant-table table,
+  .mll-ant-table .mll-ant-table-container,
+  .mll-ant-table.mll-ant-table-bordered .mll-ant-table-container {
+    border: none;
+  }
+
+  .mll-ant-table.mll-ant-table-bordered .mll-ant-table-container table,
+  .mll-ant-table.mll-ant-table-bordered
+    .mll-ant-table-container
+    .mll-ant-table-content
+    table {
+    border-top: none;
+  }
+
+  /* Show the header in deep blue */
+  th.mll-ant-table-cell {
+    background-color: ${(props) => props.theme.tableHeaderBackgroundColor};
+    color: white;
+  }
+
+  /* Less jarring than the default hover color */
+  th.mll-ant-table-column-has-sorters:hover {
+    background-color: ${(props) => props.theme.borderColor};
+  }
+
+  /* Since the background is darker, highlight in white */
+  th .mll-ant-table-column-sorter-up.active,
+  th .mll-ant-table-column-sorter-down.active {
+    color: white;
+  }
+
+  /* Maximum contrast */
+  td {
+    background-color: white;
+  }
+
+  /* Do not highlight the sorted column */
+  td.mll-ant-table-column-sort {
+    background: none;
+  }
+
+  /* Increase horizontal space for squished together contents */
+  .mll-ant-table.mll-ant-table-small tr td {
+    padding-left: 2px;
+  }
+
+  /* Stripe rows */
+
+  /* Depending on the table layout, the header may or may not count as a row */
+  .mll-ant-table.mll-ant-table-fixed-header tr:nth-child(odd) td,
+  .mll-ant-table:not(.mll-ant-table-fixed-header) tr:nth-child(even) td {
+    background-color: ${(props) => props.theme.tableRowStripeBackgroundColor};
+  }
+
+  /* Still highlight colored rows on hover */
+  .mll-ant-table.mll-ant-table-fixed-header
+    tr:nth-child(odd)
+    td.mll-ant-table-cell-row-hover,
+  .mll-ant-table:not(.mll-ant-table-fixed-header)
+    tr:nth-child(even)
+    td.mll-ant-table-cell-row-hover {
+    background-color: ${PALETTE.gray1};
+  }
+
+  /* Less contrast and a bit more space in the header */
+  .mll-ant-table.mll-ant-table-bordered
+    thead.mll-ant-table-thead
+    tr
+    > th.mll-ant-table-cell {
+    border-right: 1px solid ${(props) => props.theme.borderColor};
+    padding-left: 2px;
+  }
+
+  /* Avoid duplicate border before scrollbar */
+  .mll-ant-table-cell-scrollbar {
+    box-shadow: none;
+  }
+
+  /* Fill out right and left side of the header with the background color */
+  .mll-ant-table.mll-ant-table-bordered
+    table
+    thead.mll-ant-table-thead
+    tr
+    > th.mll-ant-table-cell.mll-ant-table-selection-column,
+  .mll-ant-table.mll-ant-table-bordered
+    table
+    thead.mll-ant-table-thead
+    tr
+    > th.mll-ant-table-cell:last-child {
+    border-right: 1px solid ${(props) => props.theme.tableHeaderBackgroundColor};
+  }
+
+  /* Avoid 1px border of invisible column */
+  .mll-ant-table.mll-ant-table-bordered
+    table
+    tr
+    > td.mll-ant-table-cell.mll-ant-table-selection-column {
+    border-right: none;
+  }
+
+  /* Fill out left and right upper corner background color */
+  .mll-ant-table-container table > thead > tr:first-child th:last-child,
+  .mll-ant-table-container table > thead > tr:first-child th:first-child {
+    border-radius: 0;
+  }
+
+  /* Highlight selected row and avoid visibility of rowSelection checkbox  */
+  .mll-ant-table tr.mll-ant-table-row.mll-ant-table-row-selected td {
+    background-color: ${(props) => props.theme.focusedRowColor};
+  }
+` as typeof Table;
+
 // Re-define JSX API components, see https://github.com/ant-design/ant-design/blob/a4d139687a6ca5a0abad09ac5cdadce617ccf9ca/components/table/Table.tsx#L548-L550
 Table.Column = AntdTable.Column;
 Table.ColumnGroup = AntdTable.ColumnGroup;

diff --git a/src/theme.ts b/src/theme.ts
@@ -13,6 +13,8 @@ export const PALETTE = {
   blue: '#50a0d0',
   lightBlue: '#d4edfc',
   blueTintedGray: '#f0f2f5',
+  tableHeaderBackgroundColor: '#2f7eae',
+  tableRowStripeBackgroundColor: 'rgb(228,238,250,0.45)',
 
   // Shades
   white: '#ffffff', // brightest possible
@@ -51,6 +53,9 @@ export type Theme = {
   successColor: string;
   warningColor: string;
 
+  tableHeaderBackgroundColor: string;
+  tableRowStripeBackgroundColor: string;
+
   fontSize?: string;
   size?: SizeType;
 };
@@ -67,6 +72,8 @@ export const THEME: Theme = {
   menuGroupBackgroundColor: PALETTE.gray1,
   panelBackgroundColor: PALETTE.gray3,
   tableBorderColor: PALETTE.gray4,
+  tableHeaderBackgroundColor: PALETTE.tableHeaderBackgroundColor,
+  tableRowStripeBackgroundColor: PALETTE.tableRowStripeBackgroundColor,
   titleColor: PALETTE.gray5,
   disabledColors: {
     lowContrast: PALETTE.gray5,