This is an automated email from the ASF dual-hosted git repository.
rusackas 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 5747fb1e850 feat(ListView): add pagination to card view and center row
count display (#36288)
5747fb1e850 is described below
commit 5747fb1e850ca994bf35bbe85d2d2bca064666f0
Author: om pharate <[email protected]>
AuthorDate: Sat Jan 24 02:10:07 2026 +0530
feat(ListView): add pagination to card view and center row count display
(#36288)
---
.../src/components/Pagination/index.tsx | 24 ++++++++++++
.../superset-ui-core/src/components/index.ts | 2 +
.../src/components/ListView/ListView.tsx | 43 ++++++++++++++++++----
3 files changed, 61 insertions(+), 8 deletions(-)
diff --git
a/superset-frontend/packages/superset-ui-core/src/components/Pagination/index.tsx
b/superset-frontend/packages/superset-ui-core/src/components/Pagination/index.tsx
new file mode 100644
index 00000000000..62c2423a1d8
--- /dev/null
+++
b/superset-frontend/packages/superset-ui-core/src/components/Pagination/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Pagination as AntdPagination } from 'antd';
+import type { PaginationProps as AntdPaginationProps } from 'antd';
+
+export type PaginationProps = AntdPaginationProps;
+
+export const Pagination = AntdPagination;
diff --git
a/superset-frontend/packages/superset-ui-core/src/components/index.ts
b/superset-frontend/packages/superset-ui-core/src/components/index.ts
index 12a0504ce55..96d17aa6547 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/index.ts
+++ b/superset-frontend/packages/superset-ui-core/src/components/index.ts
@@ -147,6 +147,8 @@ export { Loading, type LoadingProps } from './Loading';
export { Progress, type ProgressProps } from './Progress';
+export { Pagination, type PaginationProps } from './Pagination';
+
export { Skeleton, type SkeletonProps } from './Skeleton';
export { Switch, type SwitchProps } from './Switch';
diff --git a/superset-frontend/src/components/ListView/ListView.tsx
b/superset-frontend/src/components/ListView/ListView.tsx
index bfc0731924a..f81532beebe 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -28,6 +28,7 @@ import {
Icons,
EmptyState,
Loading,
+ Pagination,
type EmptyStateProps,
} from '@superset-ui/core/components';
import CardCollection from './CardCollection';
@@ -91,6 +92,7 @@ const ListViewStyles = styled.div`
.row-count-container {
margin-top: ${theme.sizeUnit * 2}px;
color: ${theme.colorText};
+ text-align: center;
}
`}
`;
@@ -446,14 +448,39 @@ export function ListView<T extends object = any>({
/>
)}
{viewMode === 'card' && (
- <CardCollection
- bulkSelectEnabled={bulkSelectEnabled}
- prepareRow={prepareRow}
- renderCard={renderCard}
- rows={rows}
- loading={loading}
- showThumbnails={showThumbnails}
- />
+ <>
+ <CardCollection
+ bulkSelectEnabled={bulkSelectEnabled}
+ prepareRow={prepareRow}
+ renderCard={renderCard}
+ rows={rows}
+ loading={loading}
+ showThumbnails={showThumbnails}
+ />
+ {count > 0 && (
+ <div className="pagination-container">
+ <Pagination
+ current={pageIndex + 1}
+ pageSize={pageSize}
+ total={count}
+ onChange={page => {
+ gotoPage(page - 1);
+ }}
+ size="default"
+ showSizeChanger={false}
+ showQuickJumper={false}
+ hideOnSinglePage
+ align="center"
+ />
+ <div className="row-count-container">
+ {`${pageIndex * pageSize + 1}-${Math.min(
+ (pageIndex + 1) * pageSize,
+ count,
+ )} of ${count}`}
+ </div>
+ </div>
+ )}
+ </>
)}
{viewMode === 'table' && (
<>
