fix: table: increase selection column size, add border bottom header …

…prop (#209)
EightfoldAI · Jun 29, 2022 · 2a36bee · 2a36bee
1 parent e9c7617
commit 2a36bee
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git a/src/components/Table/Styles/bordered.scss b/src/components/Table/Styles/bordered.scss
@@ -360,6 +360,16 @@
             }
         }
 
+        &-header-bottom-bordered {
+            table {
+                thead {
+                    tr th {
+                        border-bottom: $table-border;
+                    }
+                }
+            }
+        }
+
         &-inner-bordered {
             .table-title {
                 border: $table-border;

diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss
@@ -50,7 +50,7 @@
     --table-font-size-md: 14px;
     --table-font-size-sm: 14px;
     --table-line-height: 20px;
-    --table-selection-column-width: 32px;
+    --table-selection-column-width: 80px;
 
     clear: both;
     max-width: 100%;

diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -1404,6 +1404,7 @@ Header_Bordered.args = {
     ...tableArgs,
     bordered: false,
     headerBordered: true,
+    headerBottomBordered: false,
 };
 
 Inner_Bordered.args = {

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -79,6 +79,7 @@ function InternalTable<RecordType extends object = any>(
         filterSearchPlaceholderText,
         getPopupContainer,
         headerBordered = false,
+        headerBottomBordered = false,
         indentSize,
         innerBordered = false,
         loading,
@@ -556,6 +557,14 @@ function InternalTable<RecordType extends object = any>(
                             !innerBordered &&
                             headerBordered,
                     },
+                    {
+                        [styles.tableHeaderBottomBordered]:
+                            !bordered &&
+                            !rowBordered &&
+                            !innerBordered &&
+                            !headerBordered &&
+                            headerBottomBordered,
+                    },
                     {
                         [styles.tableInnerBordered]:
                             !bordered && !rowBordered && innerBordered,

diff --git a/src/components/Table/Table.types.tsx b/src/components/Table/Table.types.tsx
@@ -230,6 +230,11 @@ export interface TableProps<RecordType>
     filterSearchPlaceholderText?: string;
     getPopupContainer?: GetPopupContainer;
     headerBordered?: boolean;
+    /**
+     * Adds border to the bottom of the header
+     * @default false
+     */
+    headerBottomBordered?: boolean;
     onChange?: (
         pagination: TablePaginationConfig,
         filters: Record<string, FilterValue | null>,