Merge pull request #280 from Ferlab-Ste-Justine/feat/SJIP-414/number-table

feat(entity): SJIP-414 add total in panel header

Author: lflangis

Diff for: packages/ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "7.2.0",
+    "version": "7.3.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

Diff for: packages/ui/src/pages/EntityPage/EntityExpandableTableMultiple/index.tsx

@@ -24,6 +24,7 @@ const EntityExpandableTableMultiple = ({
     id,
     loading,
     tables = [],
+    total = 0,
     title,
     titleExtra,
 }: IEntityExpandableTableMultiple): React.ReactElement => (
@@ -34,7 +35,16 @@ const EntityExpandableTableMultiple = ({
             </Title>
         )}
         <Collapse arrowIcon="caretFilled" className={styles.collapse} defaultActiveKey={['1']}>
-            <CollapsePanel className={styles.panel} extra={titleExtra} header={header} key="1">
+            <CollapsePanel
+                className={styles.panel}
+                extra={titleExtra}
+                header={
+                    <Space size={2}>
+                        {header} {total > 0 && <span>({total})</span>}
+                    </Space>
+                }
+                key="1"
+            >
                 <Card className={styles.card} loading={loading}>
                     <Space align="start" className={styles.content} direction={direction} size={12}>
                         {tables.length > 0 ? (

Diff for: packages/ui/src/pages/EntityPage/EntityTable/index.tsx

@@ -29,6 +29,7 @@ export interface IEntityTable {
     size?: SizeType;
     title?: string;
     titleExtra?: ReactNode[];
+    total?: number;
     summaryColumns?: TProTableSummary[];
     emptyMessage?: string;
 }
@@ -47,6 +48,7 @@ const EntityTable = ({
     summaryColumns = [],
     title,
     titleExtra,
+    total = 0,
     emptyMessage = 'No data available',
 }: IEntityTable): React.ReactElement => {
     const [scroll, setScroll] = useState<{ y: number } | undefined>(undefined);
@@ -69,7 +71,16 @@ const EntityTable = ({
                 </Title>
             )}
             <Collapse arrowIcon="caretFilled" className={styles.collapse} defaultActiveKey={['1']}>
-                <CollapsePanel className={styles.panel} extra={titleExtra} header={header} key="1">
+                <CollapsePanel
+                    className={styles.panel}
+                    extra={titleExtra}
+                    header={
+                        <Space size={2}>
+                            {header} {total > 0 && <span>({total})</span>}
+                        </Space>
+                    }
+                    key="1"
+                >
                     <Card className={styles.card} loading={loading}>
                         {!loading && data.length ? (
                             <ProTable

Diff for: packages/ui/src/pages/EntityPage/EntityTableMultiple/index.tsx

@@ -26,6 +26,7 @@ export interface IEntityTableMultiple {
         initialColumnState?: TColumnStates;
         size?: SizeType;
     }[];
+    total?: number;
 }
 
 const EntityTableMultiple = ({
@@ -36,6 +37,7 @@ const EntityTableMultiple = ({
     tables = [],
     title,
     titleExtra,
+    total = 0,
 }: IEntityTableMultiple): React.ReactElement => (
     <div className={styles.container} id={id}>
         {title && (
@@ -44,7 +46,16 @@ const EntityTableMultiple = ({
             </Title>
         )}
         <Collapse arrowIcon="caretFilled" className={styles.collapse} defaultActiveKey={['1']}>
-            <CollapsePanel className={styles.panel} extra={titleExtra} header={header} key="1">
+            <CollapsePanel
+                className={styles.panel}
+                extra={titleExtra}
+                header={
+                    <Space size={2}>
+                        {header} {total > 0 && <span>({total})</span>}
+                    </Space>
+                }
+                key="1"
+            >
                 <Card className={styles.card} loading={loading}>
                     <Space align="start" className={styles.content} direction={direction} size={12}>
                         {tables.map(