diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx index 956b066c9acc7..6c5123806f94d 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx @@ -16,7 +16,6 @@ * specific language governing permissions and limitations * under the License. */ - import React, { useCallback, useRef, diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx index 857af565e9df8..2c82ca858fb63 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx @@ -110,7 +110,6 @@ const fixedTableLayout: CSSProperties = { tableLayout: 'fixed' }; /** * An HOC for generating sticky header and fixed-height scrollable area */ - function StickyWrap({ sticky = {}, width: maxWidth, @@ -216,8 +215,7 @@ function StickyWrap({ let sizerTable: ReactElement | undefined; let headerTable: ReactElement | undefined; let footerTable: ReactElement | undefined; - let fullTable: ReactElement | undefined; - + let bodyTable: ReactElement | undefined; if (needSizer) { const theadWithRef = React.cloneElement(thead, { ref: theadRef }); const tfootWithRef = tfoot && React.cloneElement(tfoot, { ref: tfootRef }); @@ -255,7 +253,6 @@ function StickyWrap({ style={{ overflow: 'hidden', }} - aria-hidden="true" > {React.cloneElement( table, @@ -293,18 +290,20 @@ function StickyWrap({ scrollFooterRef.current.scrollLeft = e.currentTarget.scrollLeft; } }; - - fullTable = ( + bodyTable = (
{React.cloneElement( table, mergeStyleProp(table, fixedTableLayout), colgroup, - thead, tbody, )}
@@ -316,11 +315,11 @@ function StickyWrap({ style={{ width: maxWidth, height: sticky.realHeight || maxHeight, - overflow: 'auto', - padding: '0', + overflow: 'hidden', }} > - {fullTable} + {headerTable} + {bodyTable} {footerTable} {sizerTable} diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx index e78c953a4a1d5..9219b6f0030d2 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx @@ -32,13 +32,10 @@ export default styled.div` td { min-width: 4.3em; } + thead > tr > th { - position: sticky; - top: -1px; padding-right: 0; - z-index: 100; - border-bottom: ${theme.gridUnit / 2}px solid - ${theme.colors.grayscale.light2}; + position: relative; background: ${theme.colors.grayscale.light5}; text-align: left; }