Released: May 21, 2024

SurveyJS v1.10.5 introduces server-side data pagination, filtering, and sorting for Table View in Dashboard. Bug fixes and minor enhancements are included as well.

In SurveyJS Dashboard, Table View displays unaggregated user responses in a table and allows viewers to export the responses as a PDF, CSV, or XLSX document. Previously, Table View could paginate, filter, and sort data only on the client side. This meant that all user responses were loaded from a storage in one batch and processed in the user's browser, demanding fast web connection and higher computing power.

SurveyJS v1.10.5 introduces an API that enables you to delegate data pagination, filtering, and sorting to a web server. This API is a function that you pass to the Tabulator constructor when you instantiate Table View. This function accepts an object with the following properties:

• offset: number
  The number of records to skip from the beginning of the dataset. Used to implement data pagination.

• limit: number
  The number of records to load in the current batch. Used to implement data pagination.

• filter: Array<{ field: string, type: string, value: any }>
  Filter conditions that should be applied to the dataset. Refer to the Tabulator documentation for information on available filters.

• sort: { field: string, direction: undefined | "asc" | "desc" }
  Sort order settings that should be applied to the dataset.

• callback: (response: { data: Array<Object>, totalCount: number, error?: any }) => void })
  A callback used to return the processed dataset. Instead of using the callback, you can use a Promise, as shown below.

Send the offset, limit, filter, and sort property values to the server, apply them to the dataset, and send the processed dataset back to the client in an object with the following structure: { data: Array<Object>, totalCount: number, error?: any }. Note that your server must support data pagination, filtering, and sorting for this feature to work.

The following code shows how to implement the data loading function using a Promise and using a callback:

// ...
import { Model } from "survey-core";
import { Tabulator } from "survey-analytics/survey.analytics.tabulator";

const surveyJson = { ... };
const survey = new Model(surveyJson);

// Loads a processed dataset, returns it using a Promise
function getProcessedData ({ offset, limit, filter, sort }) {
  const url = "http://www.example.com/";
  const reqBody = { offset, limit, filter, sort };
  return fetch(url, { body: reqBody });
}

// Loads a processed dataset, returns it using a callback
function getProcessedData ({ offset, limit, filter, sort, callback }) {
  const url = "http://www.example.com/";
  const reqBody = { offset, limit, filter, sort };

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.send(JSON.stringify(reqBody));

  xhr.onload = () => {
    if (xhr.status !== 200) {
      alert(xhr.status + ': ' + xhr.statusText);
    } else {
      callback(xhr.response);
    }
  };
}

const tabulator = new Tabulator(survey, getProcessedData);
tabulator.render("tabulatorContainer");

View Demo Example on GitHub

Customize the Tab Bar

Form Library

• Dynamic Matrix: The keyName property doesn't work for questions in the detail section (#8288)
• NextJS: Warnings are thrown when survey elements adapt to smaller screen sizes (#8254)
• SurveyModel's onValueChanging event is not raised when updating a comment value (#8292)

Survey Creator

• The "Choices are copied from <question>" message isn't updated after the choicesFromQuestion property is changed (#5495)
• The Delete adorner disappears for a choice option when its value is set to 0 (#5500)
• The "JSON Editor" tab caption is untranslated (#5503)
• [Mobile] An error occurs when using drag and drop (#5466)
• The "Choices" table allows specifying duplicate values if the "Value" field is moved to the edit form (#5506)

npm i survey-core@1.10.5 survey-angular-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-angular@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save

npm i survey-core@1.10.5 survey-react-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-react@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save

npm i survey-core@1.10.5 survey-vue3-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-vue@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save

npm i survey-core@1.10.5 survey-vue-ui@1.10.5 --save
npm i survey-creator-core@1.10.5 survey-creator-knockout@1.10.5 --save
npm i survey-analytics@1.10.5 --save
npm i survey-pdf@1.10.5 --save

<link href="https://unpkg.com/survey-core@1.10.5/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@1.10.5/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-knockout-ui@1.10.5/survey-knockout-ui.min.js"></script>

<link href="https://unpkg.com/survey-creator-core@1.10.5/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@1.10.5/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-knockout@1.10.5/survey-creator-knockout.min.js"></script>

<link href="https://unpkg.com/survey-analytics@1.10.5/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@1.10.5/survey.analytics.min.js"></script>

<script src="https://unpkg.com/survey-pdf@1.10.5/survey.pdf.min.js"></script>