float

package.json

@@ -29,7 +29,8 @@
     "react-excel-renderer": "^1.1.0",
     "react-number-format": "^4.4.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-tooltip": "^4.2.8"
   },
   "scripts": {
     "start": "react-scripts start",

src/container/MasterData/UnitBisnis.js

@@ -6,6 +6,7 @@ import Images from "../../assets/Images";
 import UploadFile from "../../library/Upload";
 import MUIDataTable from "mui-datatables";
 import CreateUnitBisnis from "./formUnitBisnis/CreateUnitBisnis";
+import ReactTooltip from 'react-tooltip';
 import { TextField, InputBase } from "@material-ui/core";
 import { ExcelRenderer } from 'react-excel-renderer';
 import api from "../../api";
@@ -37,7 +38,7 @@ export default class UnitBisnis extends Component {
     fileHandler = (event) => {
         let fileObj = event
         ExcelRenderer(fileObj, (err, resp) => {
-            console.log(resp)
+            // console.log(resp)
             if (err) {
                 console.log(err);
             }
@@ -58,24 +59,103 @@ export default class UnitBisnis extends Component {
                     business_unit: payload
                 }
                 api.create().checkUploadUnitBisnis(body).then(response => {
-                    console.log(response);
+                    // console.log(response);
                     let dataRow = response.data.data.map((item, index) => {
                         return [
-                            index+1,
+                            index + 1,
                             item.business_unit_name,
                             item.start_date,
                             item.end_date,
                             item.error
                         ]
                     })
+
+                    let columns = [
+                        "Data Ke-",
+                        {
+                            name: "Unit Bisnis",
+                            options: {
+                                customBodyRender: (val, tableMeta) => {
+                                    let check = null
+                                    if (tableMeta.rowData[4] != null) {
+                                        check = tableMeta.rowData[4].findIndex((val) => val.field.includes('business_unit_name'))
+                                    }
+                                    return (
+                                        <div style={{ display: 'flex' }}>
+                                            {tableMeta.rowData[4] != null && check > -1  ?
+                                                <a data-tip={tableMeta.rowData[4][check].message} data-for="unitbisnis">
+                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
+                                                </a> :
+                                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
+                                            }
+                                            <ReactTooltip border={true} id="unitbisnis" place="bottom" type="light" effect="solid" />
+                                        </div >
+                                    );
+                                }
+                            }
+                        },
+                        {
+                            name: "Berlaku Mulai",
+                            options: {
+                                customBodyRender: (val, tableMeta) => {
+                                    let check = null
+                                    if (tableMeta.rowData[4] != null) {
+                                        check = tableMeta.rowData[4].findIndex((val) => val.field.includes('start_date'))
+                                    }
+                                    return (
+                                        <div style={{ display: 'flex' }}>
+                                            {tableMeta.rowData[4] != null && check > -1 ?
+                                                <a data-tip={tableMeta.rowData[4][check].message} data-for="startdate">
+                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
+                                                </a> :
+                                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
+                                            }
+                                            <ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
+                                        </div >
+                                    );
+                                }
+                            }
+                        },
+                        {
+                            name: "Berakhir Hingga",
+                            options: {
+                                customBodyRender: (val, tableMeta) => {
+                                    let check = null
+                                    if (tableMeta.rowData[4] != null) {
+                                        check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
+                                    }
+                                    return (
+                                        <div style={{ display: 'flex' }}>
+                                            {tableMeta.rowData[4] != null && check > -1  ?
+                                                <a data-tip={tableMeta.rowData[4][check].message} data-for="enddate">
+                                                    <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
+                                                </a> :
+                                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
+                                            }
+                                            <ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
+                                        </div >
+                                    );
+                                }
+                            }
+                        },
+                        {
+                            name: "",
+                            options: {
+                                display: false
+                            }
+                        }
+                    ]
+
+                    console.log(dataRow);
+                    this.setState({
+                        dataLoaded: true,
+                        cols: columns,
+                        rows: dataRow
+                    });
                 })
 
                 // console.log(JSON.stringify(payload));
-                this.setState({
-                    dataLoaded: true,
-                    cols: judul,
-                    rows: isi
-                });
+
             }
         });
     }
@@ -235,7 +315,6 @@ export default class UnitBisnis extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
-
                 <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
                 {this.state.visibleUnitBisnis === true ?
                     <div>