refactor(FE-316,317): Extract Uniformity table columns to constant

src/components/pages/uniformity/UniformityTable.tsx

@@ -3,7 +3,7 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
-import { SortingState, CellContext } from '@tanstack/react-table';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import { cn } from '@/lib/helper';
 import Button from '@/components/Button';
 import UniformityChart from '@/components/pages/uniformity/UniformityChart';
@@ -168,50 +168,8 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
     }
   };
 
-  return (
+  // ===== TABLE COLUMNS DEFINITION =====
-    <>
+  const uniformityColumns: ColumnDef<Uniformity>[] = [
-      <section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
-        <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-          <Button color='primary' href='/uniformity/add'>
-            <Icon icon='ic:round-plus' width={18} height={18} />
-            Add Uniformity
-          </Button>
-        </div>
-
-        <div className='sm:flex gap-2'>
-          <Button variant='outline'>
-            <Icon icon='heroicons:funnel' width={18} height={18} />
-            Filter
-          </Button>
-
-          <Button variant='outline'>
-            <Icon icon='heroicons:cloud-arrow-down' width={18} height={18} />
-            Export
-          </Button>
-        </div>
-      </section>
-
-      <div className='my-4 divider'></div>
-
-      <section>
-        <UniformityStat />
-      </section>
-
-      <div className='my-4'></div>
-
-      <section>
-        <UniformityChart />
-      </section>
-
-      <Card
-        variant='bordered'
-        className={{
-          wrapper: 'my-4 w-full',
-        }}
-      >
-        <Table<Uniformity>
-          data={isResponseSuccess(uniformities) ? uniformities?.data : []}
-          columns={[
     {
       id: 'select',
       header: ({ table }) => {
@@ -270,21 +228,13 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
         );
       },
     },
-            {
-              header: '#',
-              cell: (props) =>
-                tableFilterState.pageSize * (tableFilterState.page - 1) +
-                props.row.index +
-                1,
-            },
     {
       header: 'Lokasi',
       cell: (props) => props.row.original.location.name || '-',
     },
     {
       header: 'Flock',
-              cell: (props) =>
+      cell: (props) => `Flock ${props.row.original.project_flock_kandang_id}`,
-                `Flock ${props.row.original.project_flock_kandang_id}`,
     },
     {
       header: 'Kandang',
@@ -315,15 +265,12 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
     {
       header: 'Aksi',
       cell: (props: CellContext<Uniformity, unknown>) => {
-                const currentPageSize =
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
-                  props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
-                const currentPageRows =
-                  props.table.getPaginationRowModel().flatRows;
         const currentRowRelativeIndex =
           currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
 
-                const isLast2Rows =
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-                  currentRowRelativeIndex > currentPageSize - 2;
 
         const deleteClickHandler = () => {
           setSelectedUniformity(props.row.original);
@@ -355,7 +302,52 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
         );
       },
     },
-          ]}
+  ];
+
+  return (
+    <>
+      <section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
+        <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+          <Button color='primary' href='/uniformity/add'>
+            <Icon icon='ic:round-plus' width={18} height={18} />
+            Add Uniformity
+          </Button>
+        </div>
+
+        <div className='sm:flex gap-2'>
+          <Button variant='outline'>
+            <Icon icon='heroicons:funnel' width={18} height={18} />
+            Filter
+          </Button>
+
+          <Button variant='outline'>
+            <Icon icon='heroicons:cloud-arrow-down' width={18} height={18} />
+            Export
+          </Button>
+        </div>
+      </section>
+
+      <div className='my-4 divider'></div>
+
+      <section>
+        <UniformityStat />
+      </section>
+
+      <div className='my-4'></div>
+
+      <section>
+        <UniformityChart />
+      </section>
+
+      <Card
+        variant='bordered'
+        className={{
+          wrapper: 'my-4 w-full',
+        }}
+      >
+        <Table<Uniformity>
+          data={isResponseSuccess(uniformities) ? uniformities?.data : []}
+          columns={uniformityColumns}
           pageSize={tableFilterState.pageSize}
           page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
           totalItems={