table filter and icons enhancements

Summary:
- Allows alignment of table columns
- fixes display of lager numbers in log counts
- fixes the alignment of `FilterRow`

Reviewed By: priteshrnandgaonkar

Differential Revision: D9850598

fbshipit-source-id: 106f4dc6a422f58e090f97857bd7be02e7c2c1d2

src/ui/components/filter/FilterRow.js

@@ -21,20 +21,21 @@ const FilterText = styled('div')({
   maxWidth: '100%',
   '&:hover': {
     color: colors.white,
+    zIndex: 2,
   },
   '&:hover::after': {
     content: '""',
     position: 'absolute',
-    top: 3,
-    bottom: -2,
+    top: 2,
+    bottom: 1,
     left: -6,
     right: -6,
     borderRadius: '999em',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    zIndex: -1,
   },
   '&:hover *': {
     color: `${colors.white} !important`,
-    zIndex: 2,
   },
 });
 

src/ui/components/table/TableRow.js

@@ -73,6 +73,7 @@ const TableBodyColumnContainer = styled('div')(props => ({
   wordWrap: props.multiline ? 'break-word' : 'normal',
   width: props.width === 'flex' ? '100%' : props.width,
   maxWidth: '100%',
+  justifyContent: props.justifyContent,
 }));
 
 type Props = {
@@ -143,6 +144,7 @@ export default class TableRow extends React.PureComponent<Props> {
               key={key}
               title={title}
               multiline={multiline}
+              justifyContent={col.align || 'flex-start'}
               width={normaliseColumnWidth(columnSizes[key])}>
               {isFilterable && onAddFilter != null ? (
                 <FilterRow addFilter={onAddFilter} filterKey={key}>

src/ui/components/table/types.js

@@ -61,6 +61,7 @@ export type TableBodyColumn = {|
   sortValue?: string | number,
   isFilterable?: boolean,
   value: any,
+  align?: 'left' | 'center' | 'right',
   title?: string,
 |};