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