changed visual behaviour of the datagrid height

TharindaPrabhath · Oct 30, 2021 · 5cbe9a9 · 5cbe9a9
1 parent d455d06
commit 5cbe9a9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/CertificateTable.tsx b/src/components/CertificateTable.tsx
@@ -235,7 +235,7 @@ const CertificateTable = () => {
   return (
     <div
       style={{
-        height: 400,
+        height: "100%",
         width: "100%",
         backgroundColor: colors.secondaryBgClr,
         borderRadius: "1em",
@@ -244,15 +244,16 @@ const CertificateTable = () => {
       <DataGrid
         rows={certificates || []}
         columns={columns}
-        rowCount={100}
-        rowsPerPageOptions={[5, 10]}
+        rowCount={1000}
+        rowsPerPageOptions={[5, 10, 50, 100]}
         paginationMode="server"
         pagination
         pageSize={pageSize}
         onPageChange={(n) => setPageNo(n)}
         onPageSizeChange={(s) => setPageSize(s)}
         checkboxSelection
         disableSelectionOnClick
+        autoHeight
         style={{
           color: colors.secondaryFontClr,
           borderColor: "transparent",

diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
@@ -224,7 +224,7 @@ const UserTable = () => {
   return (
     <div
       style={{
-        height: 400,
+        height: "100%",
         width: "100%",
         backgroundColor: colors.secondaryBgClr,
         borderRadius: "1em",
@@ -233,15 +233,16 @@ const UserTable = () => {
       <DataGrid
         rows={users || []}
         columns={columns}
-        rowCount={100}
-        rowsPerPageOptions={[5, 10]}
+        rowCount={10000}
+        rowsPerPageOptions={[5, 10, 50, 100]}
         paginationMode="server"
         pagination
-        pageSize={pageSize}
+        //pageSize={pageSize}
         onPageChange={(n) => setPageNo(n)}
         onPageSizeChange={(s) => setPageSize(s)}
         checkboxSelection
         disableSelectionOnClick
+        autoHeight
         style={{
           color: colors.secondaryFontClr,
           borderColor: "transparent",