add package datatable

fiks datatable

components/Riwayat/TableRiwayat.js

@@ -1,3 +1,4 @@
+import DataTable from 'react-data-table-component';
 import Datatable from "@/components/Tables/Datatable";
 import Link from "next/link";
 import moment from "moment";
@@ -9,55 +10,202 @@ import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap"
 
 import Datetime from "react-datetime";
 
+
 class TableRiwayat extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            dataRiwayat: "",
-            dataRiwayatsort:"",
+            dataRiwayat: [],
+            dataRiwayatsort: [],
             fromDate: "",
             toDate: "",
-            updateTable: false
+            updateTable: false,
+            search: "",
+            dataFilterSearch: []
+
         };
     }
     componentDidMount = async () => {
         const { token } = this.props;
 
-        const dataRiwayat = await getLog2(this.props.token)
+        const data = await getLog2(this.props.token)
+        const dataRiwayat = data.data
         this.setState({ dataRiwayat });
     }
-    onFilter = async () => {
+    fetchData = async () => {
         const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
         const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
-        const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
-        this.setState({ dataRiwayat });
-        this.setState({ updateTable: true });
-        setTimeout(() => {
-            this.setState({ updateTable: false });
-        }, 1);
-
+        const data = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
+        const dataFilterSearch = data.data
+        this.setState({ dataFilterSearch: dataFilterSearch, dataRiwayat: dataFilterSearch });
+        // this.setState({ dataRiwayat });
     }
-    componentDidUpdate = async () => {
-        const dataRiwayatsort = this.state
-        if (this.state.updateTable === true) {
-            const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
-            const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
-            const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
-            this.setState({ dataRiwayatsort });
-            // this.setState({ dataRiwayat });
+
+    onFilter = () => {
+        this.setState({ loading: true });
+        this.fetchData(); 21
+        this.setState({ loading: false });
+        if (this.state.dataRiwayat && this.state.dataRiwayat.length) {
+            // this.renderTableData();
+            this.setState({ noData: true });
         }
     }
+    handleSearchChange = (e) => {
+        const { dataRiwayat } = this.state;
+        const searchValue = e.target.value;
+        const dataNoFilter = dataRiwayat
+        const result = dataRiwayat.filter((item) =>
+            item.aktivitas.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.timestamp?.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.username?.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.ipv4?.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.menu?.toLowerCase().includes(searchValue.toLowerCase())
+        );
+        this.setState({
+            search: searchValue,
+        })
+        if (result.length) {
+            this.setState({
+
+                dataFilterSearch: result
+            });
 
+        }
+        else {
+            this.setState({
+
+                dataFilterSearch: dataNoFilter
+            })
+        }
+
+    }
 
     render() {
+        const { dataRiwayat, search, dataFilterSearch } = this.state
+        const columns = [
+            {
+                name: 'Timestamp',
+                // selector: row => row.timestamp,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
+                            >
+                                { }
+                                {row.timestamp}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+            {
+                name: 'UserName',
+                // selector: row => row.username,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
+                            >
+                                { }
+                                {row.username}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+            {
+                name: 'IPv4',
+                // selector: row => row.ipv4,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
+                            >
+                                { }
+                                {row.ipv4}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+
+            {
+                name: 'Menu',
+                // selector: row => row.menu,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', width: '100px' }}
+                            >
+                     
+                                {row.menu||"-"}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+            {
+                name: 'Deskripsi',
+                // selector: row => row.aktivitas,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', overflow: 'hidden', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '300px' }}
+                            >
+                                { }
+                                {row.aktivitas}
+                            </div>
+                        </div>
+                    </div>
+                ),
+            },
+        ];
+        const data = dataRiwayat?.map((value, index) => (
+
+            {
+
+                timestamp: value.createdAt,
+                username: value.user?.nama,
+                ipv4: value?.ipv4,
+                menu: value?.menu,
+                aktivitas: value?.aktivitas,
+            }
+
+
+
+        ))
+        const datasearch = dataFilterSearch?.map((value, index) => (
+
+            {
+
+                timestamp: value.createdAt,
+                username: value.user?.nama,
+                ipv4: value?.ipv4,
+                menu: value?.menu,
+                aktivitas: value?.aktivitas,
+            }
+
+
+
+        ))
         return (
             <div className="card b ">
 
-                <div className="card-body card-over">
-                    <span className=" ml-2 float-left">
+                <div className="row card-body card-over">
+                    <div className=" pl-4 col-2 float-left">
                         <label className="col-form-label">Range Filter : </label>
 
-                        <span className=" mr-2 ml-4">
+                        <span>
                             <Datetime
                                 timeFormat={false}
                                 inputProps={{ className: "form-control" }}
@@ -66,6 +214,7 @@ class TableRiwayat extends Component {
                                 onChange={(fromDate) => {
                                     this.setState({ fromDate })
                                 }}
+                                className=' mb-3'
                             />
                         </span>
                         <span>
@@ -77,86 +226,32 @@ class TableRiwayat extends Component {
                                 onChange={(toDate) => {
                                     this.setState({ toDate })
                                 }}
+                                // className=' w-75'
                             />
                         </span>
-                        <Button color="info" className=" mt-4" onClick={this.onFilter}>Filter</Button>
-
-                    </span>
-                    {this.state.dataRiwayat && (
-                        <Datatable options={{
-                            searching: true, 
-                            aLengthMenu: [500],
-                            paging: false,
-                            scrollX: true, scrollY: "370px",
-                            bordered: true,
-                            "pageLength": 10
-                        }}>
-                            <table className="table w-100" data-order='[[3, "desc"]]'>
-                                <thead>
-                                    <tr>
-                                        <th>Timestamp</th>
-                                        <th>Username</th>
-                                        <th>IPv4</th>
-                                        <th>Menu</th>
-                                        <th>Deskripsi</th>
-                                        {/* <th>Created</th> */}
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
-                                        <tr>
-                                            <td style={{ width: 175 }}>
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, HH:mm"))}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td >
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.user?.nama}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td>
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.ipv4}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td >
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.menu}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td style={{ minWidth: 350 }}>
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.aktivitas}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))}
-
-                                </tbody>
-                            </table>
-                        </Datatable>
-                    )}
+                        <Button color="info" className=" mt-4" onClick={(e) => this.onFilter()}>Filter</Button>
+
+                    </div>
+                    <div className="col-10">
+                        <DataTable data={datasearch.length ? datasearch : data} columns={columns}
+                            defaultSortField="title"
+                            pagination
+                            // selectableRows
+                            subHeader
+                            subHeaderComponent={
+                                <input
+                                    type="text"
+                                    className="w-25 form-control"
+                                    placeholder="Search..."
+                                    value={search}
+                                    onChange={this.handleSearchChange}
+                                />
+                            }
+                            subHeaderAlign="right"
+                        />
+                    </div>
+
+
                 </div>
             </div >
         );

package-lock.json

@@ -2175,6 +2175,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -3639,6 +3644,11 @@
         }
       }
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-lite": {
       "version": "1.0.30001299",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
@@ -4247,6 +4257,11 @@
         "component-classes": "^1.2.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
@@ -4291,6 +4306,16 @@
         "fastparse": "^1.1.2"
       }
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -7397,6 +7422,11 @@
       "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
       "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
     },
+    "nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -8306,6 +8336,11 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -9002,6 +9037,21 @@
         "shallowequal": "^1.1.0"
       }
     },
+    "react-data-table-component": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.6.2.tgz",
+      "integrity": "sha512-nHe7040fmtrJyQr/ieGrTfV0jBflYGK4sLokC6/AFOv3ThjmA9WzKz8Z8/2wMxzRqLU+Rn0CVFg+8+frKLepWQ==",
+      "requires": {
+        "deepmerge": "^4.3.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+          "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+        }
+      }
+    },
     "react-datepicker": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
@@ -10283,6 +10333,11 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -10608,6 +10663,67 @@
         "schema-utils": "^2.6.6"
       }
     },
+    "styled-components": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
+      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "requires": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+          "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+          "requires": {
+            "@emotion/memoize": "^0.8.1"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+          "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+        },
+        "@emotion/unitless": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+          "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+        },
+        "csstype": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+          "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+        },
+        "postcss": {
+          "version": "8.4.31",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+          "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "stylis": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+          "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+        },
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
     "styled-jsx": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.0.tgz",

package.json

@@ -89,6 +89,7 @@
     "react-contenteditable": "^3.3.7",
     "react-copy-to-clipboard": "^5.1.0",
     "react-data-grid": "6.1.0",
+    "react-data-table-component": "^7.6.2",
     "react-datepicker": "^4.8.0",
     "react-datetime": "2.16.3",
     "react-dnd": "6.0.0",
@@ -115,6 +116,7 @@
     "screenfull": "3.3.3",
     "simple-line-icons": "2.5.5",
     "spinkit": "1.2.5",
+    "styled-components": "^6.1.8",
     "sweetalert": "2.1.2",
     "sweetalert2": "^11.4.14",
     "swr": "^1.0.1",

pages/app/riwayat/index.js

@@ -22,7 +22,7 @@ class Riwayat extends Component {
 
         const data = await getLog2(this.props.token)
         const dataRiwayat = data.data
-        this.setState({ dataRiwayat })
+        this.setState({ dataRiwayat })  
     }
     setDateFilter = (data) => {
         this.setState({ dataFilter: data })