feat: add withOption props

Author: ryanf10

src/app/sandbox/table/page.tsx

@@ -190,6 +190,7 @@ export default function ComponentPage() {
               setTableState={setTableState}
               className='mt-8'
               withFilter
+              withOption
             />
 
             <Typography
@@ -217,6 +218,7 @@ export default function ComponentPage() {
                 unpaginatedData?.data ? filterData(unpaginatedData.data) : []
               }
               withFilter
+              withOption
             />
 
             <Typography

src/components/table/PaginatedTable.tsx

@@ -28,6 +28,7 @@ type PaginatedTableProps<T extends object> = {
   pageSize?: number;
   omitSort?: boolean;
   withFilter?: boolean;
+  withOption?: boolean;
 } & React.ComponentPropsWithoutRef<'div'>;
 
 export default function PaginatedTable<T extends object>({
@@ -38,6 +39,7 @@ export default function PaginatedTable<T extends object>({
   pageSize = 10,
   omitSort = false,
   withFilter = false,
+  withOption = false,
   ...rest
 }: PaginatedTableProps<T>) {
   const [globalFilter, setGlobalFilter] = React.useState('');
@@ -98,19 +100,21 @@ export default function PaginatedTable<T extends object>({
               buttonClassname={popUpFilterProps.buttonClassname}
             />
           )}
-          <TOption
-            icon={<FiList className='text-typo-secondary' />}
-            value={table.getState().pagination.pageSize}
-            onChange={(e) => {
-              table.setPageSize(Number(e.target.value));
-            }}
-          >
-            {[5, 10, 25].map((page) => (
-              <option key={page} value={page}>
-                {page} Entries
-              </option>
-            ))}
-          </TOption>
+          {withOption && (
+            <TOption
+              icon={<FiList className='text-typo-secondary' />}
+              value={table.getState().pagination.pageSize}
+              onChange={(e) => {
+                table.setPageSize(Number(e.target.value));
+              }}
+            >
+              {[5, 10, 25].map((page) => (
+                <option key={page} value={page}>
+                  {page} Entries
+                </option>
+              ))}
+            </TOption>
+          )}
         </div>
       </div>
       <div className='-mx-4 -my-2 mt-2 overflow-x-auto sm:-mx-6 lg:-mx-8'>

src/components/table/ServerCard.tsx

@@ -39,6 +39,7 @@ type ServerCardProps<T extends object> = {
   tableState: ServerCardState;
   setTableState: SetServerCardState;
   withFilter?: boolean;
+  withOption?: boolean;
 } & React.ComponentPropsWithoutRef<'div'>;
 
 export default function ServerCard<T extends object>({
@@ -51,6 +52,7 @@ export default function ServerCard<T extends object>({
   tableState,
   setTableState,
   withFilter = false,
+  withOption = false,
   ...rest
 }: ServerCardProps<T>) {
   const lastPage =
@@ -95,19 +97,21 @@ export default function ServerCard<T extends object>({
               buttonClassname={popUpFilterProps.buttonClassname}
             />
           )}
-          <TOption
-            icon={<FiList />}
-            value={table.getState().pagination.pageSize}
-            onChange={(e) => {
-              table.setPageSize(Number(e.target.value));
-            }}
-          >
-            {[5, 10, 25].map((page) => (
-              <option key={page} value={page}>
-                {page} Entries
-              </option>
-            ))}
-          </TOption>
+          {withOption && (
+            <TOption
+              icon={<FiList />}
+              value={table.getState().pagination.pageSize}
+              onChange={(e) => {
+                table.setPageSize(Number(e.target.value));
+              }}
+            >
+              {[5, 10, 25].map((page) => (
+                <option key={page} value={page}>
+                  {page} Entries
+                </option>
+              ))}
+            </TOption>
+          )}
         </div>
       </div>
       <div className='flex flex-col'>

src/components/table/ServerTable.tsx

@@ -43,6 +43,7 @@ type ServerTableProps<T extends object> = {
   setTableState: SetServerTableState;
   omitSort?: boolean;
   withFilter?: boolean;
+  withOption?: boolean;
 } & React.ComponentPropsWithoutRef<'div'>;
 
 export default function ServerTable<T extends object>({
@@ -56,6 +57,7 @@ export default function ServerTable<T extends object>({
   setTableState,
   omitSort = false,
   withFilter = false,
+  withOption = false,
   ...rest
 }: ServerTableProps<T>) {
   const lastPage =
@@ -100,19 +102,21 @@ export default function ServerTable<T extends object>({
               buttonClassname={popUpFilterProps.buttonClassname}
             />
           )}
-          <TOption
-            icon={<FiList />}
-            value={table.getState().pagination.pageSize}
-            onChange={(e) => {
-              table.setPageSize(Number(e.target.value));
-            }}
-          >
-            {[5, 10, 25].map((page) => (
-              <option key={page} value={page}>
-                {page} Entries
-              </option>
-            ))}
-          </TOption>
+          {withOption && (
+            <TOption
+              icon={<FiList />}
+              value={table.getState().pagination.pageSize}
+              onChange={(e) => {
+                table.setPageSize(Number(e.target.value));
+              }}
+            >
+              {[5, 10, 25].map((page) => (
+                <option key={page} value={page}>
+                  {page} Entries
+                </option>
+              ))}
+            </TOption>
+          )}
         </div>
       </div>
       <div className='-mx-4 -my-2 mt-2 overflow-x-auto sm:-mx-6 lg:-mx-8'>