This is an automated email from the ASF dual-hosted git repository.
choo121600 pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new c00185cecef Refactor DataTable to handle internal scrolling and fix
overflow on narrow viewports (#62603)
c00185cecef is described below
commit c00185cecef7bbe00357d7bf8fb99f2b73ef90b1
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 | 28 ++++++++++----------
5 files changed, 55 insertions(+), 59 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 7326a200505..317177c2606 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,
@@ -162,7 +162,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} />
@@ -170,17 +170,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} table={table} />
- ) : 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} table={table} />
+ ) : undefined}
+ {!hasRows && !Boolean(isLoading) && (
+ <Text as="div" pl={4} pt={1}>
+ {noRowsMessage ?? translate("noItemsFound", { modelName:
noRowsModelName })}
+ </Text>
+ )}
+ </Box>
{hasPagination ? (
<Pagination.Root
count={table.getRowCount()}
@@ -197,6 +199,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 669708397fb..2e924e54d65 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 { useMemo } from "react";
import { useTranslation } from "react-i18next";
@@ -172,19 +172,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 f6a56708637..602bc124657 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 { useMemo, useState } from "react";
@@ -189,20 +189,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 1855a32d421..0c32a2568e8 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -320,7 +320,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 fdea3be2383..c9d3e623d7f 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.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 { useEffect, useMemo, useState } from "react";
@@ -202,20 +202,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>
