Fixing report

src/components/Global/TableList.jsx

@@ -19,6 +19,7 @@ const TableList = memo(function TableList({
     cardColor,
     fieldColor,
     firstLoad = true,
+    columnDynamic = false,
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -31,6 +32,8 @@ const TableList = memo(function TableList({
         total_page: 1,
     });
 
+    const [columnsDynamic, setColumnsDynamic] = useState(columns);
+
     const [viewMode, setViewMode] = useState('table');
 
     const { useBreakpoint } = Grid;
@@ -57,6 +60,49 @@ const TableList = memo(function TableList({
         const param = new URLSearchParams({ ...paging, ...queryParams });
         const resData = await getData(param);
 
+        if (columnDynamic && resData) {
+            const columnsApi = resData[columnDynamic] ?? '';
+
+            // Pisahkan string menjadi array kolom
+            const colArray = columnsApi.split(',').map((c) => c.trim());
+
+            // Kolom default datetime di awal
+            const defaultColumns = [
+                {
+                    title: 'No',
+                    key: 'no',
+                    width: '5%',
+                    align: 'center',
+                    render: (_, __, index) => index + 1,
+                },
+                {
+                    title: 'Datetime',
+                    dataIndex: 'datetime',
+                    key: 'datetime',
+                    width: '15%',
+                    // render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss'),
+                },
+            ];
+
+            // Buat kolom numerik dengan format 4 angka di belakang koma
+            const numericColumns = colArray.map((colName) => ({
+                title: colName,
+                dataIndex: colName,
+                key: colName,
+                align: 'right',
+                width: 'auto',
+                render: (value) => {
+                    if (typeof value === 'number') {
+                        return value.toFixed(4);
+                    }
+                    return value ?? '-';
+                },
+            }));
+
+            // Gabungkan default + API columns
+            setColumnsDynamic([...defaultColumns, ...numericColumns]);
+        }
+
         setData(resData?.data ?? []);
 
         const pagingData = resData?.paging;
@@ -71,6 +117,8 @@ const TableList = memo(function TableList({
             }));
         }
 
+        setGridLoading(false);
+
         if (resData) {
             setTimeout(() => {
                 setGridLoading(false);
@@ -109,7 +157,7 @@ const TableList = memo(function TableList({
                     cardColor={cardColor}
                     fieldColor={fieldColor}
                     data={data}
-                    column={columns}
+                    column={columnsDynamic}
                     header={header}
                     showPreviewModal={showPreviewModal}
                     showEditModal={showEditModal}
@@ -119,7 +167,7 @@ const TableList = memo(function TableList({
                 <Row gutter={24} style={{ marginTop: '16px' }}>
                     <Table
                         rowSelection={rowSelection || null}
-                        columns={columns}
+                        columns={columnsDynamic}
                         dataSource={data.map((item, index) => ({ ...item, key: index }))}
                         pagination={false}
                         loading={gridLoading}