This is an automated email from the ASF dual-hosted git repository.
rahulvats pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new b5eb4279c06 Refactor DataTable to handle internal scrolling and fix
overflow on narrow viewports (#62603)
b5eb4279c06 is described below
commit b5eb4279c06c3d11545d74cbbe52436ea54f0824
Author: Yeonguk Choo <[email protected]>
AuthorDate: Tue Mar 3 16:20:46 2026 +0900
Refactor DataTable to handle internal scrolling and fix overflow on narrow
viewports (#62603)
---
.../ui/src/components/DataTable/DataTable.tsx | 30 ++++++++++++----------
.../airflow/ui/src/pages/AssetsList/AssetsList.tsx | 26 +++++++++----------
.../ui/src/pages/Connections/Connections.tsx | 28 ++++++++++----------
.../src/airflow/ui/src/pages/DagsList/DagsList.tsx | 2 +-
.../airflow/ui/src/pages/Variables/Variables.tsx | 26 +++++++++----------
5 files changed, 54 insertions(+), 58 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx
b/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx
index caf507dcb0c..4ec00ff62f2 100644
--- a/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Heading, HStack, Text } from "@chakra-ui/react";
+import { Box, Heading, HStack, Text } from "@chakra-ui/react";
import {
getCoreRowModel,
getExpandedRowModel,
@@ -169,7 +169,7 @@ export const DataTable = <TData,>({
) : undefined;
return (
- <>
+ <Box display="flex" flex={1} flexDirection="column" minH={0}>
<ProgressBar size="xs" visibility={Boolean(isFetching) &&
!Boolean(isLoading) ? "visible" : "hidden"} />
{showDisplayToggle && onDisplayToggleChange ? (
<ToggleTableDisplay display={display}
setDisplay={onDisplayToggleChange} />
@@ -177,17 +177,19 @@ export const DataTable = <TData,>({
<Toaster />
{errorMessage}
{rowCountHeading}
- {hasRows && display === "table" ? (
- <TableList allowFiltering={showColumnsFilter} table={table} />
- ) : undefined}
- {hasRows && display === "card" && cardDef !== undefined ? (
- <CardList cardDef={cardDef} isLoading={isLoading} rows={rows} />
- ) : undefined}
- {!hasRows && !Boolean(isLoading) && (
- <Text as="div" pl={4} pt={1}>
- {noRowsMessage ?? translate("noItemsFound", { modelName:
noRowsModelName })}
- </Text>
- )}
+ <Box flex={1} minH={0} overflow="auto">
+ {hasRows && display === "table" ? (
+ <TableList allowFiltering={showColumnsFilter} table={table} />
+ ) : undefined}
+ {hasRows && display === "card" && cardDef !== undefined ? (
+ <CardList cardDef={cardDef} isLoading={isLoading} rows={rows} />
+ ) : undefined}
+ {!hasRows && !Boolean(isLoading) && (
+ <Text as="div" pl={4} pt={1}>
+ {noRowsMessage ?? translate("noItemsFound", { modelName:
noRowsModelName })}
+ </Text>
+ )}
+ </Box>
{hasPagination ? (
<Pagination.Root
count={rowCount}
@@ -204,6 +206,6 @@ export const DataTable = <TData,>({
</HStack>
</Pagination.Root>
) : undefined}
- </>
+ </Box>
);
};
diff --git a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
index 6859231f7ec..b0e5d96674a 100644
--- a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, Link, useDisclosure, VStack } from
"@chakra-ui/react";
+import { Flex, Heading, Link, useDisclosure, VStack } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import { useTranslation } from "react-i18next";
import { useSearchParams, Link as RouterLink } from "react-router-dom";
@@ -170,19 +170,17 @@ export const AssetsList = () => {
/>
</Flex>
</VStack>
- <Box overflow="auto">
- <DataTable
- columns={columns}
- data={data?.assets ?? []}
- errorMessage={<ErrorAlert error={error} />}
- initialState={tableURLState}
- isLoading={isLoading}
- modelName="common:asset"
- onStateChange={setTableURLState}
- showRowCountHeading={false}
- total={data?.total_entries}
- />
- </Box>
+ <DataTable
+ columns={columns}
+ data={data?.assets ?? []}
+ errorMessage={<ErrorAlert error={error} />}
+ initialState={tableURLState}
+ isLoading={isLoading}
+ modelName="common:asset"
+ onStateChange={setTableURLState}
+ showRowCountHeading={false}
+ total={data?.total_entries}
+ />
</>
);
};
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
index a4ebb9a98de..e6cde198ab0 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, HStack, Spacer, VStack } from "@chakra-ui/react";
+import { Flex, HStack, Spacer, VStack } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import type { TFunction } from "i18next";
import { useState } from "react";
@@ -201,20 +201,18 @@ export const Connections = () => {
</HStack>
</VStack>
- <Box overflow="auto">
- <DataTable
- columns={columns}
- data={data?.connections ?? []}
- errorMessage={<ErrorAlert error={error} />}
- initialState={tableURLState}
- isFetching={isFetching}
- isLoading={isLoading}
- modelName="admin:connections.connection"
- noRowsMessage={<NothingFoundInfo />}
- onStateChange={setTableURLState}
- total={data?.total_entries ?? 0}
- />
- </Box>
+ <DataTable
+ columns={columns}
+ data={data?.connections ?? []}
+ errorMessage={<ErrorAlert error={error} />}
+ initialState={tableURLState}
+ isFetching={isFetching}
+ isLoading={isLoading}
+ modelName="admin:connections.connection"
+ noRowsMessage={<NothingFoundInfo />}
+ onStateChange={setTableURLState}
+ total={data?.total_entries ?? 0}
+ />
<ActionBar.Root closeOnInteractOutside={false}
open={Boolean(selectedRows.size)}>
<ActionBar.Content>
<ActionBar.SelectionTrigger>
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
index 92b6a4865e2..87a79388be4 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -314,7 +314,7 @@ export const DagsList = () => {
) : undefined}
</HStack>
</VStack>
- <Box overflow="auto" pb={8}>
+ <Box pb={8}>
<DataTable
cardDef={cardDef}
columns={columns}
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
index 37eccfc27f2..1aacbab07ff 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
@@ -218,20 +218,18 @@ export const Variables = () => {
<AddVariableButton disabled={selectedRows.size > 0} />
</HStack>
</VStack>
- <Box overflow="auto">
- <DataTable
- columns={columns}
- data={data?.variables ?? []}
- errorMessage={<ErrorAlert error={error} />}
- initialState={tableURLState}
- isFetching={isFetching}
- isLoading={isLoading}
- modelName="admin:variables.variable"
- noRowsMessage={translate("variables.noRowsMessage")}
- onStateChange={setTableURLState}
- total={data?.total_entries ?? 0}
- />
- </Box>
+ <DataTable
+ columns={columns}
+ data={data?.variables ?? []}
+ errorMessage={<ErrorAlert error={error} />}
+ initialState={tableURLState}
+ isFetching={isFetching}
+ isLoading={isLoading}
+ modelName="admin:variables.variable"
+ noRowsMessage={translate("variables.noRowsMessage")}
+ onStateChange={setTableURLState}
+ total={data?.total_entries ?? 0}
+ />
<ActionBar.Root closeOnInteractOutside={false}
open={Boolean(selectedRows.size)}>
<ActionBar.Content>
<ActionBar.SelectionTrigger>
