@databiosphere/findable-ui 4.0.0 → 6.0.0

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -1,4 +1,4 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
 import {
   FlatPaper,
@@ -10,7 +10,7 @@ import { NoResults } from "../../../NoResults/noResults";
 import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table, TableProps } from "../Table/table";
 
-interface DetailViewTableProps<T extends object> extends TableProps<T> {
+interface DetailViewTableProps<T extends RowData> extends TableProps<T> {
   className?: string;
   columns: ColumnDef<T>[];
   gridTemplateColumns: string;
@@ -20,7 +20,7 @@ interface DetailViewTableProps<T extends object> extends TableProps<T> {
   tools?: ReactNode;
 }
 
-export const DetailViewTable = <T extends object>({
+export const DetailViewTable = <T extends RowData>({
   className,
   columns,
   gridTemplateColumns,
@@ -31,7 +31,7 @@ export const DetailViewTable = <T extends object>({
   ...tableProps
 }: DetailViewTableProps<T>): JSX.Element => {
   return items.length > 0 ? (
-    <Paper className={className}>
+    <Paper className={className} variant="table">
       <GridPaper>
         {tools && <Toolbar variant="table">{tools}</Toolbar>}
         <Table

package/src/components/Detail/components/Table/common/utils.ts

@@ -1,11 +1,11 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 
 /**
  * Generates columns from column definitions with meta associated with the column.
  * @param columns - Column configuration.
  * @returns generated column definitions.
  */
-export function generateColumnDefinitions<T>(
+export function generateColumnDefinitions<T extends RowData>(
   columns: ColumnDef<T>[]
 ): ColumnDef<T>[] {
   return columns.map((column) => {

package/src/components/Detail/components/Table/components/TableBody/tableBody.tsx

@@ -1,18 +1,18 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { TableRows } from "../TableRows/tableRows";
 
-export interface TableBodyProps<T> {
+export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
-export const TableBody = <T extends object>({
+export const TableBody = <T extends RowData>({
   rowDirection,
   tableInstance,
   tableView,

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,26 +1,24 @@
-import { TableRow } from "@mui/material";
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { v4 as uuid4 } from "uuid";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
+import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
 
-export interface CollapsableRowsProps<T> {
+export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
 }
 
-export const CollapsableRows = <T extends object>({
+export const CollapsableRows = <T extends RowData>({
   tableInstance,
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
-  const uuid = uuid4(); // Generate a unique ID for the collapsable rows.
   return (
     <Fragment>
       {rows.map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
-          <TableRow key={`${uuid}${row.id}`}>
+          <TableRow key={row.id} isPreview={row.getIsPreview()}>
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,11 +1,11 @@
-import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
-import { flexRender, Row, Table } from "@tanstack/react-table";
-import { RowData } from "@tanstack/table-core";
+import { TableCell as MTableCell } from "@mui/material";
+import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { getTableCellPadding } from "../../../../../Table/components/TableCell/common/utils";
+import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 import { TableView } from "../../table";
 
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
   tableView?: TableView;
 }
@@ -22,7 +22,11 @@ export const TableRows = <T extends RowData>({
     <Fragment>
       {rows.map((row) => {
         return (
-          <MTableRow id={getRowId(row)} key={row.id}>
+          <TableRow
+            id={getRowId(row)}
+            isPreview={row.getIsPreview()}
+            key={row.id}
+          >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
               if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
@@ -36,7 +40,7 @@ export const TableRows = <T extends RowData>({
                 </MTableCell>
               );
             })}
-          </MTableRow>
+          </TableRow>
         );
       })}
     </Fragment>

package/src/components/Detail/components/Table/table.tsx

@@ -7,9 +7,10 @@ import {
 import {
   ColumnDef,
   getCoreRowModel,
+  RowData,
+  TableOptions,
   useReactTable,
 } from "@tanstack/react-table";
-import { TableOptions } from "@tanstack/table-core";
 import React from "react";
 import {
   BREAKPOINT_FN_NAME,
@@ -18,6 +19,7 @@ import {
 import { TABLET } from "../../../../theme/common/breakpoints";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
 import { TableBody } from "./components/TableBody/tableBody";
@@ -28,7 +30,7 @@ export interface TableView {
   tableContainer?: Partial<MTableContainerProps>;
 }
 
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
   className?: string;
   collapsable?: boolean;
   columns: ColumnDef<T>[];
@@ -38,7 +40,7 @@ export interface TableProps<T extends object> {
   tableView?: TableView;
 }
 
-export const Table = <T extends object>({
+export const Table = <T extends RowData>({
   className,
   collapsable = true,
   columns,
@@ -54,6 +56,7 @@ export const Table = <T extends object>({
   const { stickyHeader = false } = table || {};
   const { sx: tableContainerSx } = tableContainer || {};
   const tableInstance = useReactTable({
+    _features: [ROW_PREVIEW],
     columns: generateColumnDefinitions(columns),
     data: items,
     enableSorting: false,

package/src/components/Filter/components/Filters/filters.tsx

@@ -21,7 +21,7 @@ export interface CategoryFilter {
 export interface FiltersProps {
   categoryFilters: CategoryFilter[];
   closeAncestor?: () => void;
-  disabled: boolean; // Global disabling of filters; typically in "related" entity view.
+  disabled?: boolean; // Global disabling of filters.
   onFilter: OnFilterFn;
   trackFilterOpened?: TrackFilterOpenedFunction;
 }

package/src/components/Index/components/Cell/cell.tsx

@@ -4,6 +4,10 @@ export interface CellProps {
   value?: number | string | string[];
 }
 
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+
 export const Cell = ({ value = "Unspecified" }: CellProps): JSX.Element => {
   if (typeof value === "string" || typeof value === "number") {
     return <div>{value}</div>;

package/src/components/Index/components/NTag/components/Tooltip/tooltip.tsx

@@ -28,6 +28,10 @@ export interface TooltipProps extends MTooltipProps {
   className?: string;
 }
 
+/**
+ * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
+ */
+
 export const Tooltip = ({
   children,
   className,

package/src/components/Index/components/NTag/nTag.tsx

@@ -7,6 +7,10 @@ export interface NTagProps {
   TooltipTitle: ReactElement;
 }
 
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
+
 export const NTag = ({
   className,
   Tag,

package/src/components/Index/components/NTagCell/nTagCell.tsx

@@ -4,6 +4,8 @@ import {
   Typography,
 } from "@mui/material";
 import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
+import { TypographyProps } from "../../../common/Typography/common/entities";
 import { NTag } from "../NTag/nTag";
 
 // Template constants
@@ -13,6 +15,7 @@ export type MetadataValue = string;
 
 export interface NTagCellProps {
   label: string;
+  TypographyProps?: TypographyProps;
   values: MetadataValue[];
 }
 
@@ -33,7 +36,15 @@ const Tag = forwardRef<HTMLDivElement, MChipProps>(function Tag(props, ref) {
   return <MChip ref={ref} {...props} />;
 });
 
-export const NTagCell = ({ label, values }: NTagCellProps): JSX.Element => {
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+
+export const NTagCell = ({
+  label,
+  TypographyProps,
+  values,
+}: NTagCellProps): JSX.Element => {
   const metadataCount = values.length;
   const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
   return (
@@ -42,13 +53,21 @@ export const NTagCell = ({ label, values }: NTagCellProps): JSX.Element => {
         <NTag
           Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
           TooltipTitle={
-            <Typography display="block" variant="text-body-small-400">
+            <Typography display="block" variant={TEXT_BODY_SMALL_400}>
               {stringifyMetadataValues(values)}
             </Typography>
           }
         />
       ) : (
-        values.map((value, v) => <div key={`${value}${v}`}>{value}</div>)
+        values.map((value, v) => (
+          <Typography
+            key={`${value}${v}`}
+            variant="inherit"
+            {...TypographyProps}
+          >
+            {value}
+          </Typography>
+        ))
       )}
     </>
   );

package/src/components/Layout/components/Outline/common/constants.ts

@@ -1,3 +1,3 @@
-import { TabProps as MTabProps } from "@mui/material/Tab/Tab";
+import { TabProps as MTabProps } from "@mui/material";
 
 export const DEFAULT_TAB_VALUE: MTabProps["value"] = "";

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -1,3 +1,4 @@
+import { ColumnSort } from "@tanstack/react-table";
 import Link from "next/link";
 import React, { useCallback } from "react";
 import { UrlObject } from "url";
@@ -14,9 +15,10 @@ import {
 import { LinkProps } from "../../link";
 
 const PARAM_FILTER = "filter";
+const PARAM_SORTING = "sorting";
 
 export interface ExploreViewLinkProps
-  extends Omit<LinkProps, "copyable" | "noWrap" | "url"> {
+  extends Omit<LinkProps, "copyable" | "noWrap" | "TypographyProps" | "url"> {
   url: UrlObjectWithHrefAndQuery;
 }
 
@@ -36,8 +38,9 @@ export const ExploreViewLink = ({
   const onNavigate = useCallback(() => {
     const entityListType = getEntityListType(url.href);
     const filters = getSelectedFilters(url.query);
+    const sorting = getSorting(url.query);
     exploreDispatch({
-      payload: { entityListType, filters },
+      payload: { entityListType, filters, sorting },
       type: ExploreActionKind.UpdateEntityFilters,
     });
     onClick?.();
@@ -78,6 +81,19 @@ function getSelectedFilters(
   return parsedQuery[PARAM_FILTER];
 }
 
+/**
+ * Returns the sorting from the given query.
+ * @param query - Query.
+ * @returns sorting.
+ */
+function getSorting(
+  query: UrlObjectWithHrefAndQuery["query"]
+): ColumnSort[] | undefined {
+  const decodedQuery = decodeURIComponent(query);
+  const parsedQuery = JSON.parse(decodedQuery);
+  return parsedQuery[PARAM_SORTING];
+}
+
 /**
  * Returns true if the given value is a SelectedFilter.
  * @param value - Value.

package/src/components/Links/components/Link/link.tsx

@@ -1,8 +1,13 @@
-import { Link as MLink, LinkProps as MLinkProps } from "@mui/material";
+import {
+  Link as MLink,
+  LinkProps as MLinkProps,
+  Typography as MTypography,
+} from "@mui/material";
 import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
+import { TypographyProps } from "../../../common/Typography/common/entities";
 import { ANCHOR_TARGET, Url } from "../../common/entities";
 import {
   isClientSideNavigation,
@@ -18,6 +23,7 @@ export interface LinkProps {
   noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
+  TypographyProps?: TypographyProps;
   url: Url /* url specified as UrlObject with href and query defined, and is currently only used for internal links */;
 }
 
@@ -28,6 +34,7 @@ export const Link = ({
   noWrap = false,
   onClick,
   target,
+  TypographyProps,
   url,
 }: LinkProps): JSX.Element => {
   if (isURLObjectWithHrefAndQuery(url)) {
@@ -54,6 +61,7 @@ export const Link = ({
               noWrap={noWrap}
               target={target || ANCHOR_TARGET.SELF}
               onClick={onClick}
+              {...TypographyProps}
             >
               {label}
             </MLink>
@@ -73,6 +81,7 @@ export const Link = ({
             onClick={onClick}
             rel="noopener noreferrer"
             target={target || ANCHOR_TARGET.BLANK}
+            {...TypographyProps}
           >
             {label}
           </MLink>
@@ -82,5 +91,9 @@ export const Link = ({
     }
   }
   /* Invalid URL */
-  return <>{label}</>;
+  return (
+    <MTypography component="span" variant="inherit" {...TypographyProps}>
+      {label}
+    </MTypography>
+  );
 };

package/src/components/Table/common/gridTable.styles.ts

@@ -20,9 +20,13 @@ export const GridTable = styled(MTable, {
     display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
   }
 
+  tr {
+    background-color: ${white};
+  }
+
   td,
   th {
-    background-color: ${white};
+    background-color: inherit;
   }
 
   td,
@@ -38,8 +42,10 @@ export const GridTable = styled(MTable, {
   }
 
   [id^="grouped-row"] {
+    background-color: ${smokeLightest};
+
     td {
-      background-color: ${smokeLightest};
+      background-color: inherit;
       grid-column: 1 / -1;
     }
   }

package/src/components/Table/common/utils.ts

@@ -1,19 +1,20 @@
 import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
-import { TableSortLabelProps } from "@mui/material/TableSortLabel/TableSortLabel";
+import { TableSortLabelProps } from "@mui/material";
 import {
   Cell,
+  Column,
   ColumnFiltersState,
   ColumnSort,
   InitialTableState,
   memo,
+  PaginationState,
   Row,
   RowData,
   SortDirection,
   sortingFns,
   Table,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Column } from "@tanstack/table-core";
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
 import { SelectCategory } from "../../../common/entities";
 import {
   ColumnConfig,
@@ -32,7 +33,7 @@ type CountByTerms = Map<any, number>;
 /**
  * Pinned cell and pinned cell index tuple.
  */
-type PinnedCell<T> = [Cell<T, unknown>, number];
+type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
 
 /**
  * Model of possible table data values.
@@ -50,7 +51,7 @@ type TableData = number | string | string[];
  * @param filterValue - Filter value or values.
  * @returns True if the row should be included in the filtered rows.
  */
-export function arrIncludesSome<T>(
+export function arrIncludesSome<T extends RowData>(
   row: Row<T>,
   columnId: string,
   filterValue: unknown[]
@@ -71,7 +72,7 @@ export function arrIncludesSome<T>(
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-export function buildCategoryViews<T>(
+export function buildCategoryViews<T extends RowData>(
   columns: Column<T>[],
   columnFilters: ColumnFiltersState
 ): SelectCategory[] {
@@ -139,7 +140,9 @@ export function getColumnSortDirection(
  * @param rows - Table rows.
  * @returns filtered entity results as a blob.
  */
-export function generateDownloadBlob<T>(rows: Row<T>[]): Blob | undefined {
+export function generateDownloadBlob<T extends RowData>(
+  rows: Row<T>[]
+): Blob | undefined {
   if (rows.length === 0) {
     return;
   }
@@ -154,7 +157,7 @@ export function generateDownloadBlob<T>(rows: Row<T>[]): Blob | undefined {
  * @param table - Table.
  * @returns a list of edit column options.
  */
-export function getEditColumnOptions<T>(
+export function getEditColumnOptions<T extends RowData>(
   table: Table<T>
 ): CheckboxMenuListItem[] {
   const { getAllColumns, initialState } = table;
@@ -200,18 +203,20 @@ export function getFacetedUniqueValuesWithArrayValues<T extends RowData>(): (
 ) => () => CountByTerms {
   return (table, columnId) =>
     memo(
-      () => [table.getColumn(columnId).getFacetedRowModel()],
+      () => [table.getColumn(columnId)?.getFacetedRowModel()],
       (facetedRowModel) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This type matches react table getFacetedUniqueValues return type.
         const facetedUniqueValues = new Map<any, number>();
-        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
-          const value = facetedRowModel.flatRows[i]?.getValue(columnId);
-          if (Array.isArray(value)) {
-            value.map((val) => {
-              updateCountByTerms(facetedUniqueValues, val);
-            });
-          } else {
-            updateCountByTerms(facetedUniqueValues, value);
+        if (facetedRowModel) {
+          for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+            const value = facetedRowModel?.flatRows[i]?.getValue(columnId);
+            if (Array.isArray(value)) {
+              value.map((val) => {
+                updateCountByTerms(facetedUniqueValues, val);
+              });
+            } else {
+              updateCountByTerms(facetedUniqueValues, value);
+            }
           }
         }
         return facetedUniqueValues;
@@ -233,7 +238,9 @@ export function getFacetedUniqueValuesWithArrayValues<T extends RowData>(): (
  * @param columns - Table columns.
  * @returns string value for the css property grid-template-columns.
  */
-export function getGridTemplateColumns<T>(columns: Column<T>[]): string {
+export function getGridTemplateColumns<T extends RowData>(
+  columns: Column<T>[]
+): string {
   return columns
     .map(({ columnDef: { meta } }) => {
       const width = meta?.width;
@@ -282,7 +289,9 @@ export function getInitialTableStateSorting(
  * @param row - Row.
  * @returns pinned cell and index tuple.
  */
-export function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T> {
+export function getPinnedCellIndex<T extends RowData>(
+  row: Row<T>
+): PinnedCell<T> {
   const visibleCells = row.getVisibleCells();
   let pinnedIndex = 0;
   for (let i = 0; i < visibleCells.length; i++) {
@@ -299,7 +308,7 @@ export function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T> {
  * @param column - Table column.
  * @returns table sort label props.
  */
-export function getTableSortLabelProps<T>(
+export function getTableSortLabelProps<T extends RowData>(
   column: Column<T>
 ): TableSortLabelProps {
   const { getCanSort, getIsSorted, getToggleSortingHandler } = column;
@@ -312,12 +321,30 @@ export function getTableSortLabelProps<T>(
   };
 }
 
+/**
+ * Returns table state pagination.
+ * @param pageIndex - Explore state page index.
+ * @param pageSize - Explore state page size.
+ * @returns table state pagination.
+ */
+export function getTableStatePagination(
+  pageIndex = 0,
+  pageSize: number
+): PaginationState {
+  return {
+    pageIndex,
+    pageSize,
+  };
+}
+
 /**
  * Returns the list of visible table headers.
  * @param rows - Table rows.
  * @returns list of visible headers.
  */
-function getVisibleHeadersTableData<T>(rows: Row<T>[]): TableData[] {
+function getVisibleHeadersTableData<T extends RowData>(
+  rows: Row<T>[]
+): TableData[] {
   return rows[0]
     .getVisibleCells()
     .map((cell) => cell.column.columnDef.header as TableData);
@@ -328,7 +355,9 @@ function getVisibleHeadersTableData<T>(rows: Row<T>[]): TableData[] {
  * @param rows - Table rows.
  * @returns list of visible data.
  */
-function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
+function getVisibleRowsTableData<T extends RowData>(
+  rows: Row<T>[]
+): TableData[][] {
   return rows.map((row) =>
     row.getVisibleCells().map((cell) => cell.getValue() as TableData)
   );
@@ -339,7 +368,7 @@ function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
  * @param table - Table.
  * @returns true if a row is selected.
  */
-export function isAnyRowSelected<T>(table: Table<T>): boolean {
+export function isAnyRowSelected<T extends RowData>(table: Table<T>): boolean {
   const {
     getIsAllPageRowsSelected,
     getIsSomePageRowsSelected,
@@ -368,7 +397,9 @@ export function isClientFilteringEnabled(exploreMode: ExploreMode): boolean {
  * @param tableInstance - Table instance.
  * @returns true if the collapsable row is disabled.
  */
-export function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean {
+export function isCollapsableRowDisabled<T extends RowData>(
+  tableInstance: Table<T>
+): boolean {
   return tableInstance.getVisibleLeafColumns().length === 1;
 }
 

package/src/components/Table/components/DownloadEntityResults/downloadEntityResults.tsx

@@ -1,16 +1,16 @@
-import { Row } from "@tanstack/react-table";
+import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { ButtonSecondary } from "../../../common/Button/components/ButtonSecondary/buttonSecondary";
 import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { generateDownloadBlob } from "../../common/utils";
 
-export interface DownloadEntityResultsProps<T> {
+export interface DownloadEntityResultsProps<T extends RowData> {
   entityName: string;
   rows: Row<T>[];
 }
 
-export const DownloadEntityResults = <T extends object>({
+export const DownloadEntityResults = <T extends RowData>({
   entityName,
   rows,
 }: DownloadEntityResultsProps<T>): JSX.Element => {

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "@mui/material";
+import { Fade, Typography } from "@mui/material";
 import React from "react";
 
 export interface PaginationSummaryProps {
@@ -13,13 +13,15 @@ export const PaginationSummary = ({
   totalResult,
 }: PaginationSummaryProps): JSX.Element => {
   return (
-    <div>
-      <Typography variant="text-body-400">Results </Typography>
-      <Typography variant="text-body-small-500">
-        {firstResult} - {lastResult}
-      </Typography>
-      <Typography variant="text-body-400"> of </Typography>
-      <Typography variant="text-body-small-500">{totalResult}</Typography>
-    </div>
+    <Fade in={totalResult > 0}>
+      <div>
+        <Typography variant="text-body-400">Results </Typography>
+        <Typography variant="text-body-small-500">
+          {firstResult} - {lastResult}
+        </Typography>
+        <Typography variant="text-body-400"> of </Typography>
+        <Typography variant="text-body-small-500">{totalResult}</Typography>
+      </div>
+    </Fade>
   );
 };