From 2bd4697e6e07940fd46bb8d987323e45197c34b5 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Fri, 11 Dec 2020 19:32:19 -0500
Subject: [PATCH] Add pagination back to large tables in feature details
 because >100 not allowed in datagrid

---
 .../BaseFeatureWidget/BaseFeatureDetail.tsx   | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx b/packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx
index 25a28c8d10..6caed420b3 100644
--- a/packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx
+++ b/packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx
@@ -296,10 +296,15 @@ export const Attributes: FunctionComponent<AttributeProps> = props => {
                   }
                 })
 
-                // avoids key 'id' from being used in column names
-                const colNames = unionKeys.has('id')
-                  ? ['identifier', ...unionKeys]
-                  : [...unionKeys]
+                // avoids key 'id' from being used in column names, and tries
+                // to make it at the start of the colNames array
+                let colNames
+                if (unionKeys.has('id')) {
+                  unionKeys.delete('id')
+                  colNames = ['identifier', ...unionKeys]
+                } else {
+                  colNames = [...unionKeys]
+                }
 
                 const columns = colNames.map(val => ({
                   field: val,
@@ -313,22 +318,29 @@ export const Attributes: FunctionComponent<AttributeProps> = props => {
                     }),
                   ),
                 }))
+
                 return (
                   <React.Fragment key={key}>
                     <FieldName prefix={prefix} name={key} />
                     <div
                       key={key}
                       style={{
-                        height: rows.length * 20 + 50,
+                        height:
+                          Math.min(rows.length, 100) * 20 +
+                          50 +
+                          (rows.length < 100 ? 0 : 50),
                         width: '100%',
                       }}
                     >
                       <DataGrid
                         rowHeight={20}
                         headerHeight={25}
-                        hideFooter
                         rows={rows}
+                        rowsPerPageOptions={[]}
+                        hideFooterRowCount
+                        hideFooterSelectedRowCount
                         columns={columns}
+                        hideFooter={rows.length < 100}
                       />
                     </div>
                   </React.Fragment>