This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun 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 dc45d1a1853 Move column filters button back to table header (#48444)
dc45d1a1853 is described below
commit dc45d1a18537f71810956fe63f93f44905d09503
Author: Brent Bovenzi <[email protected]>
AuthorDate: Fri Mar 28 04:32:39 2025 -0400
Move column filters button back to table header (#48444)
* Move column filters button back to table header
* update default show
---
.../airflow/ui/src/components/DataTable/DataTable.tsx | 16 ++++++++--------
.../ui/src/components/DataTable/FilterMenuButton.tsx | 2 +-
.../airflow/ui/src/components/DataTable/TableList.tsx | 12 ++++++++++--
3 files changed, 19 insertions(+), 11 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 8168ac28e45..785f04c0d68 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 { HStack, Spacer, Text } from "@chakra-ui/react";
+import { HStack, Text } from "@chakra-ui/react";
import {
getCoreRowModel,
getExpandedRowModel,
@@ -32,7 +32,6 @@ import {
import React, { type ReactNode, useCallback, useRef, useState } from "react";
import { CardList } from "src/components/DataTable/CardList";
-import FilterMenuButton from "src/components/DataTable/FilterMenuButton";
import { TableList } from "src/components/DataTable/TableList";
import { createSkeletonMock } from "src/components/DataTable/skeleton";
import type { CardDef, MetaColumn, TableState } from
"src/components/DataTable/types";
@@ -60,7 +59,7 @@ type DataTableProps<TData> = {
const defaultGetRowCanExpand = () => false;
export const DataTable = <TData,>({
- allowFiltering = true,
+ allowFiltering,
cardDef,
columns,
data,
@@ -129,16 +128,17 @@ export const DataTable = <TData,>({
(table.getState().pagination.pageIndex !== 0 ||
(table.getState().pagination.pageIndex === 0 && rows.length !== total));
+ // Default to show columns filter only if there are actually many columns
displayed
+ const showColumnsFilter = allowFiltering ?? columns.length > 5;
+
return (
<>
<ProgressBar size="xs" visibility={Boolean(isFetching) &&
!Boolean(isLoading) ? "visible" : "hidden"} />
<Toaster />
- <HStack>
- <Spacer display="flow" />
- {allowFiltering && hasRows && display === "table" ? <FilterMenuButton
table={table} /> : undefined}
- </HStack>
{errorMessage}
- {hasRows && display === "table" ? <TableList table={table} /> :
undefined}
+ {hasRows && display === "table" ? (
+ <TableList allowFiltering={showColumnsFilter} table={table} />
+ ) : undefined}
{hasRows && display === "card" && cardDef !== undefined ? (
<CardList cardDef={cardDef} isLoading={isLoading} table={table} />
) : undefined}
diff --git
a/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx
b/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx
index cbc9855a922..6b98ab0df63 100644
--- a/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx
@@ -35,7 +35,7 @@ const FilterMenuButton = <TData,>({ table }: Props<TData>) =>
(
margin={1}
padding={0}
title="Filter table columns"
- variant="plain"
+ variant="ghost"
>
<MdFilterList size="1" />
</IconButton>
diff --git a/airflow-core/src/airflow/ui/src/components/DataTable/TableList.tsx
b/airflow-core/src/airflow/ui/src/components/DataTable/TableList.tsx
index d2027dcc5a1..653aaa06e45 100644
--- a/airflow-core/src/airflow/ui/src/components/DataTable/TableList.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DataTable/TableList.tsx
@@ -16,17 +16,20 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Button, Table } from "@chakra-ui/react";
+import { Button, Table, Box } from "@chakra-ui/react";
import { flexRender, type Row, type Table as TanStackTable } from
"@tanstack/react-table";
import React, { Fragment } from "react";
import { TiArrowSortedDown, TiArrowSortedUp, TiArrowUnsorted } from
"react-icons/ti";
+import FilterMenuButton from "./FilterMenuButton";
+
type DataTableProps<TData> = {
+ readonly allowFiltering: boolean;
readonly renderSubComponent?: (props: { row: Row<TData> }) =>
React.ReactElement;
readonly table: TanStackTable<TData>;
};
-export const TableList = <TData,>({ renderSubComponent, table }:
DataTableProps<TData>) => (
+export const TableList = <TData,>({ allowFiltering, renderSubComponent, table
}: DataTableProps<TData>) => (
<Table.Root data-testid="table-list" striped>
<Table.Header bg="chakra-body-bg" position="sticky" top={0} zIndex={1}>
{table.getHeaderGroups().map((headerGroup) => (
@@ -71,6 +74,11 @@ export const TableList = <TData,>({ renderSubComponent,
table }: DataTableProps<
})}
</Table.Row>
))}
+ {allowFiltering ? (
+ <Box position="absolute" right={0} top={2}>
+ <FilterMenuButton table={table} />
+ </Box>
+ ) : undefined}
</Table.Header>
<Table.Body>
{table.getRowModel().rows.map((row) => (
