From 6da7c99b28170d2fc60f6bd91e8e3b9ce60eec39 Mon Sep 17 00:00:00 2001
From: tmpacifitech <webmaster@motordirex.com>
Date: Mon, 13 Sep 2021 13:59:43 -0700
Subject: [PATCH 1/2] Fit column width to child elements

---
 .../dash-table/src/dash-table/components/Table/Table.less     | 4 ++++
 .../dash-table/src/dash-table/derived/header/content.tsx      | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/dash-table/src/dash-table/components/Table/Table.less b/components/dash-table/src/dash-table/components/Table/Table.less
index 4118a020a5..060c53ee70 100644
--- a/components/dash-table/src/dash-table/components/Table/Table.less
+++ b/components/dash-table/src/dash-table/components/Table/Table.less
@@ -504,6 +504,10 @@
             th {
                 white-space: nowrap;
 
+                .column-header--wrapper {
+                    display: inline-flex;
+                }
+
                 .column-header--clear,
                 .column-header--delete,
                 .column-header--edit,
diff --git a/components/dash-table/src/dash-table/derived/header/content.tsx b/components/dash-table/src/dash-table/derived/header/content.tsx
index 629b44512e..a5c5a9db49 100644
--- a/components/dash-table/src/dash-table/derived/header/content.tsx
+++ b/components/dash-table/src/dash-table/derived/header/content.tsx
@@ -283,7 +283,7 @@ function getter(
                         );
 
                     return (
-                        <div>
+                        <div className='column-header--wrapper'>
                             {!column_selectable || !selectable ? null : (
                                 <span className='column-header--select'>
                                     <input

From b658f584f29f9420af42c1e735f38201b77a08a6 Mon Sep 17 00:00:00 2001
From: tmpacifitech <webmaster@motordirex.com>
Date: Tue, 14 Sep 2021 06:27:24 -0700
Subject: [PATCH 2/2] Improve column header style

---
 .../dash-table/components/Table/Table.less    | 23 ++++++++++---------
 .../src/dash-table/derived/header/content.tsx |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/dash-table/src/dash-table/components/Table/Table.less b/components/dash-table/src/dash-table/components/Table/Table.less
index 060c53ee70..b7a64928ed 100644
--- a/components/dash-table/src/dash-table/components/Table/Table.less
+++ b/components/dash-table/src/dash-table/components/Table/Table.less
@@ -504,17 +504,18 @@
             th {
                 white-space: nowrap;
 
-                .column-header--wrapper {
-                    display: inline-flex;
-                }
-
-                .column-header--clear,
-                .column-header--delete,
-                .column-header--edit,
-                .column-header--hide,
-                .column-header--sort {
-                    .not-selectable();
-                    cursor: pointer;
+                .column-header {
+                    display: flex;
+                    justify-content: space-between;
+
+                    &--clear,
+                    &--delete,
+                    &--edit,
+                    &--hide,
+                    &--sort {
+                        .not-selectable();
+                        cursor: pointer;
+                    }
                 }
             }
 
diff --git a/components/dash-table/src/dash-table/derived/header/content.tsx b/components/dash-table/src/dash-table/derived/header/content.tsx
index a5c5a9db49..ea5db1b56f 100644
--- a/components/dash-table/src/dash-table/derived/header/content.tsx
+++ b/components/dash-table/src/dash-table/derived/header/content.tsx
@@ -283,7 +283,7 @@ function getter(
                         );
 
                     return (
-                        <div className='column-header--wrapper'>
+                        <div className='column-header'>
                             {!column_selectable || !selectable ? null : (
                                 <span className='column-header--select'>
                                     <input