diff --git a/package.json b/package.json index 0e0e299..6fbea17 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "react-content-loader": "^6.0.3", "react-dom": "^16.14.0", "react-grid-layout": "^1.2.5", + "react-highlight-words": "^0.18.0", "react-leaflet": "^3.2.0", "react-leaflet-draw": "^0.19.8", "react-loader-spinner": "^3.1.5", diff --git a/src/views/DashboardPMOV1/tableDashboardv1.js b/src/views/DashboardPMOV1/tableDashboardv1.js index a212f2c..4f0e641 100644 --- a/src/views/DashboardPMOV1/tableDashboardv1.js +++ b/src/views/DashboardPMOV1/tableDashboardv1.js @@ -2,12 +2,20 @@ import '../../../node_modules/react-grid-layout/css/styles.css'; import '../../../node_modules/react-resizable/css/styles.css'; import './../DashboardPMO/Dashboard.css'; import { BASE_OSPRO } from '../../const/ApiConst'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import axios from 'axios' -import { Table, Row, Col } from 'antd'; +import { Table, Row, Col, Button, Input, Space } from 'antd'; import { formatRibuanDecimal } from '../../const/CustomFunc.js'; import { Badge } from 'reactstrap'; import { Link } from "react-router-dom"; +import { SearchOutlined } from '@ant-design/icons'; +import Highlighter from 'react-highlight-words'; +import _ from "lodash"; + +const filterData = data => formatter => data.map(item => ({ + text: formatter(item), + value: formatter(item) +})) const TableDashboardV1 = () => { const token = localStorage.getItem("token") @@ -20,6 +28,104 @@ const TableDashboardV1 = () => { const [MANPOWERS, SET_MANPOWERS] = useState(0) const [dataTable, setDataTable] = useState([]) + const [searchText, setSearchText] = useState(''); + const [searchedColumn, setSearchedColumn] = useState(''); + const searchInput = useRef(null); + + const handleSearch = (selectedKeys, confirm, dataIndex) => { + confirm(); + setSearchText(selectedKeys[0]); + setSearchedColumn(dataIndex); + }; + + const handleReset = (clearFilters) => { + clearFilters(); + setSearchText(''); + }; + + const getColumnSearchProps = (dataIndex) => ({ + filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( +