You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by kg...@apache.org on 2024/02/01 16:17:44 UTC
(superset) branch master updated: fix(plugin-chart-table): Revert "fix(chart table in dashboard): improve screen reading of table (#26453)" (#26963)
This is an automated email from the ASF dual-hosted git repository.
kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new e4eae9a70c fix(plugin-chart-table): Revert "fix(chart table in dashboard): improve screen reading of table (#26453)" (#26963)
e4eae9a70c is described below
commit e4eae9a70c3f5b7c3fae984a017e72e912fbad93
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Thu Feb 1 17:17:37 2024 +0100
fix(plugin-chart-table): Revert "fix(chart table in dashboard): improve screen reading of table (#26453)" (#26963)
---
.../plugin-chart-table/src/DataTable/DataTable.tsx | 1 -
.../src/DataTable/hooks/useSticky.tsx | 21 ++++++++++-----------
.../plugins/plugin-chart-table/src/Styles.tsx | 7 ++-----
3 files changed, 12 insertions(+), 17 deletions(-)
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 956b066c9a..6c5123806f 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 857af565e9..2c82ca858f 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 = (
<div
- key="full-table"
+ key="body"
ref={scrollBodyRef}
+ style={{
+ height: bodyHeight,
+ overflow: 'auto',
+ }}
onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}
>
{React.cloneElement(
table,
mergeStyleProp(table, fixedTableLayout),
colgroup,
- thead,
tbody,
)}
</div>
@@ -316,11 +315,11 @@ function StickyWrap({
style={{
width: maxWidth,
height: sticky.realHeight || maxHeight,
- overflow: 'auto',
- padding: '0',
+ overflow: 'hidden',
}}
>
- {fullTable}
+ {headerTable}
+ {bodyTable}
{footerTable}
{sizerTable}
</div>
diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index e78c953a4a..9219b6f003 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;
}