datatable css is not getting applied

[4mit]

using Angular10 with webpack4

The css to datatable is not getting applied my index.html is below `

<!-- <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.js"></script> -->

<!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css"/> -->
<!-- plz remove above once done -->
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js"></script>
<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/survey-analytics/survey.analytics.css" />

<script src="https://cdn.rawgit.com/inexorabletash/polyfill/master/typedarray.js"></script>

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/c3@0.7.1/c3.css" />

<script src="https://unpkg.com/d3@5.9.2/dist/d3.min.js"></script>
<script src="https://unpkg.com/c3@0.7.1/c3.js"></script>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script src="https://unpkg.com/wordcloud@1.1.0/src/wordcloud2.js"></script>

<script src="https://unpkg.com/survey-core"></script>
<script src="https://unpkg.com/survey-analytics"></script>`

And i'm loading below js dynamically on windonw.onload (also i tried moving below js in index.html i got the same issue )

this.loadCSS.loadExternalStyles('https://surveyjs.azureedge.net/1.7.23/survey.analytics.datatables.css'); this.loadCSS.loadExternalStyles('https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css'); this.loadCSS.loadExternalStyles('https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css'); this.loadCSS.loadExternalStyles('https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css');

{ name: 'knockout', src: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js' },
{ name: 'ko', src: 'https://surveyjs.azureedge.net/1.7.3/survey.ko.js' },
{ name: 'ace', src: 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js' },
{ name: 'lang', src: 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js' },

{ name: 'datatables', src: 'https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js' },
{ name: 'datatablesbuttons', src: 'https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.js' },
{ name: 'datatablesprint', src: 'https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.js' },
{ name: 'datatablesbuttons', src: 'https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.js' },
{ name: 'datatablescolReorder', src: 'https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.js' },
{ name: 'datatablesresponsive', src: 'https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.js' },
{ name: 'datatablesrowGroup', src: 'https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js' },
{ name: 'datatablesselect', src: 'https://cdn.datatables.net/select/1.3.1/js/dataTables.select.js' }

[tsv2013]

Since 1.7.21 we've splitted ana;ytics package

Instead of

<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/survey-analytics/survey.analytics.css" />

you need to use

<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/survey-analytics/survey.analytics.datatables.css" />

and https://unpkg.com/survey-analytics@1.7.23/survey.analytics.datatables.js for the code reference. As well as root name has been changed to the SurveyAnalyticsDatatables

[4mit]

got it

DataTables will be now SurveyAnalyticsDatatables ?? it means below var surveyAnalyticsDataTables = new this.SurveyAnalytics.DataTables(panel1Node, survey, normalizedData); surveyAnalyticsDataTables.render();

will be now var surveyAnalyticsDataTables = new this.SurveyAnalytics.SurveyAnalyticsDatatables(panel1Node, survey, normalizedData); surveyAnalyticsDataTables.render();

should i do this ?

[tsv2013]

This means

var surveyAnalyticsDataTables = new this.SurveyAnalyticsDatatables.Datatables(survey, normalizedData);

surveyAnalyticsDataTables.render(panel1Node);

[tsv2013]

You can check this live sample on our site - https://surveyjs.io/Examples/Analytics?id=nps-table

[4mit]

Thanks that worked for me .

[4mit]

facing issue with preview page css

[dk981234]

Hello,

Did you add https://surveyjs.azureedge.net/1.7.25/survey.css stylesheet on your page?

Thanks, Dmitry SurveyJS Team

[4mit]

Ah , worked thanks .