feat: add table tagination totals option

ccontrols · Mar 10, 2021 · 85bc3da · 85bc3da
1 parent bb983a5
commit 85bc3da
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 61 deletions.
diff --git a/ui/blocks/src/ComponentCommits/ComponentCommits.tsx b/ui/blocks/src/ComponentCommits/ComponentCommits.tsx
@@ -23,7 +23,7 @@ export type ComponentCommitsProps = BlockContainerProps &
 export const ComponentCommits: FC<ComponentCommitsProps> = ({
   id,
   name,
-  pagination,
+  pagination = { totalCountTemplate: '${totalData} commits' },
   ...rest
 }) => {
   const props = useCustomProps<ComponentCommitsProps>('commits', rest);

diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx
@@ -183,6 +183,8 @@ export const pagination: Example<TablePaginationProps> = props => {
 };
 
 pagination.controls = {
+  totalCountVisible: true,
+  totalCountTemplate: 'Total: ${totalData} records',
   pageIndex: 0,
   pageSize: 10,
   pageTemplate: 'Page ${pageIndex} of ${pageLength}',

diff --git a/ui/components/src/Table/TablePagination.tsx b/ui/components/src/Table/TablePagination.tsx
@@ -7,6 +7,19 @@ const runtimeTemplate = (str: string, obj: Record<string, any>) =>
   str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
 
 export interface TablePaginationProps {
+  /**
+   * array of data records
+   */
+  data?: any[];
+  /**
+   * whether to make totlal countfield visible
+   */
+  totalCountVisible?: boolean;
+
+  /**
+   * total count label text
+   */
+  totalCountTemplate?: string;
   /**
    * 'Page ${pageIndex} of ${pageLength}' template
    */
@@ -50,6 +63,9 @@ export const TablePagination: FC<UsePaginationInstanceProps<{
 }> &
   TablePaginationProps> = props => {
   const {
+    totalCountVisible = true,
+    totalCountTemplate = 'Total: ${totalData} records',
+    data = [],
     gotoPage,
     canPreviousPage,
     previousPage,
@@ -71,70 +87,80 @@ export const TablePagination: FC<UsePaginationInstanceProps<{
     pageIndex: pageIndex + 1,
     pageLength: pageOptions.length,
   });
-
+  const totalCountResolvedTemplate = runtimeTemplate(totalCountTemplate, {
+    totalData: data.length,
+  });
   return (
     <Box variant="table.pagination.container">
-      {(canPreviousPage || canNextPage) && (
-        <Box variant="table.pagination.navigation">
-          <Box variant="table.pagination.navigation.button">
-            <Button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
-              {'<<'}
-            </Button>
-          </Box>
-          <Box variant="table.pagination.navigation.button">
-            <Button onClick={() => previousPage()} disabled={!canPreviousPage}>
-              {'<'}
-            </Button>
+      <Box variant="table.pagination.total">
+        {totalCountVisible && totalCountResolvedTemplate}
+      </Box>
+      <Box variant="table.pagination.navigationContainer">
+        {(canPreviousPage || canNextPage) && (
+          <Box variant="table.pagination.navigation">
+            <Box variant="table.pagination.navigation.button">
+              <Button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+                {'<<'}
+              </Button>
+            </Box>
+            <Box variant="table.pagination.navigation.button">
+              <Button
+                onClick={() => previousPage()}
+                disabled={!canPreviousPage}
+              >
+                {'<'}
+              </Button>
+            </Box>
+            <Box variant="table.pagination.navigation.button">
+              <Button onClick={() => nextPage()} disabled={!canNextPage}>
+                {'>'}
+              </Button>
+            </Box>
+            <Box variant="table.pagination.navigation.button">
+              <Button
+                onClick={() => gotoPage(pageCount - 1)}
+                disabled={!canNextPage}
+              >
+                {'>>'}
+              </Button>
+            </Box>
           </Box>
-          <Box variant="table.pagination.navigation.button">
-            <Button onClick={() => nextPage()} disabled={!canNextPage}>
-              {'>'}
-            </Button>
+        )}
+        {pageVisible && (
+          <Box variant="table.pagination.page">{pageResolvedTemplate}</Box>
+        )}
+        {goToPageVisible && (
+          <Box variant="table.pagination.interactive">
+            {goToPageTemplate}
+            <Input
+              type="number"
+              defaultValue={pageIndex + 1}
+              onChange={e => {
+                const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                gotoPage(page);
+              }}
+            />
           </Box>
-          <Box variant="table.pagination.navigation.button">
-            <Button
-              onClick={() => gotoPage(pageCount - 1)}
-              disabled={!canNextPage}
+        )}
+        {pageSizeVisible && (
+          <Box variant="table.pagination.pagesize">
+            <Select
+              value={pageSize}
+              onChange={e => {
+                setPageSize(Number(e.target.value));
+              }}
             >
-              {'>>'}
-            </Button>
+              {[10, 20, 30, 40, 50].map(pageSize => (
+                <option key={pageSize} value={pageSize}>
+                  {runtimeTemplate(pageSizeTemplate, {
+                    pageSize,
+                  })}
+                </option>
+              ))}
+            </Select>
           </Box>
-        </Box>
-      )}
-      {pageVisible && (
-        <Box variant="table.pagination.page">{pageResolvedTemplate}</Box>
-      )}
-      {goToPageVisible && (
-        <Box variant="table.pagination.interactive">
-          {goToPageTemplate}
-          <Input
-            type="number"
-            defaultValue={pageIndex + 1}
-            onChange={e => {
-              const page = e.target.value ? Number(e.target.value) - 1 : 0;
-              gotoPage(page);
-            }}
-          />
-        </Box>
-      )}
-      {pageSizeVisible && (
-        <Box variant="table.pagination.pagesize">
-          <Select
-            value={pageSize}
-            onChange={e => {
-              setPageSize(Number(e.target.value));
-            }}
-          >
-            {[10, 20, 30, 40, 50].map(pageSize => (
-              <option key={pageSize} value={pageSize}>
-                {runtimeTemplate(pageSizeTemplate, {
-                  pageSize,
-                })}
-              </option>
-            ))}
-          </Select>
-        </Box>
-      )}
+        )}
+      </Box>
     </Box>
   );
 };
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -652,10 +652,21 @@ export const theme: ControlsTheme = {
       container: {
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'flex-end',
+        justifyContent: 'space-between',
         alignItems: 'center',
         backgroundColor: 'background',
-        pt: 2,
+        py: 2,
+      },
+      total: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        px: 3,
+      },
+      navigationContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
       },
       navigation: {
         display: 'flex',