/
DashboardDatatables.tsx
33 lines (28 loc) · 1.18 KB
/
DashboardDatatables.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
'use client'
import { useEffect, useState } from "react";
import { data, json } from "../../data/dashboard_data";
import { DataTables } from "survey-analytics/survey.analytics.datatables.js";
import { Model } from "survey-core";
import $ from "jquery";
import "datatables.net/js/jquery.dataTables.js";
import "datatables.net-dt/js/dataTables.dataTables.js";
import "datatables.net-buttons/js/dataTables.buttons.js";
import "datatables.net-buttons/js/buttons.print.js";
import "datatables.net-buttons/js/buttons.html5.js";
import "datatables.net-colreorder/js/dataTables.colReorder.js";
import "datatables.net-rowgroup/js/dataTables.rowGroup.js";
import "datatables.net-colreorder-dt/css/colReorder.dataTables.css";
import "survey-analytics/survey.analytics.datatables.css";
export default function DashboardDatatables() {
let [vizPanel, setVizPanel] = useState<DataTables>();
if (!vizPanel) {
DataTables.initJQuery($);
const survey = new Model(json);
vizPanel = new DataTables(survey, data);
setVizPanel(vizPanel);
}
useEffect(() => {
vizPanel?.render("summaryContainer");
}, [vizPanel]);
return <div style={{ height: "80vh", width: "100%" }} id="summaryContainer"></div>;
}