---
title: Table View for Survey Data
product: Dashboard
description: The table view format displays survey responses in a tabular layout, making it easy to compare responses across different questions or respondents. View this free demo for JavaScript to learn how to visualize your survey data in a table, apply filters, sorting, or export survey data to a PDF, CSV, or XLSX file.
framework: React
source: https://surveyjs.io/dashboard/examples/export-survey-results-to-csv-files/reactjs
index: https://surveyjs.io/dashboard/examples/overview.md
---

# Table View for Survey Data (React)

The SurveyJS Dashboard library can aggregate user responses and present them as charts or display the responses in a table as they are, without any aggregation. This example demonstrates the latter case—a table view with raw survey data. Note that this view not only displays survey results but also allows users to export them as a PDF, CSV, or XLSX document.

For information on how to configure the table view in your application, refer to one of the following tutorials for your framework:

[Table View for Survey Results in an Angular Application](https://surveyjs.io/dashboard/documentation/set-up-table-view/angular (linkStyle))

[Table View for Survey Results in a React Application](https://surveyjs.io/dashboard/documentation/set-up-table-view/react (linkStyle))

[Table View for Survey Results in a Vue.js Application](https://surveyjs.io/dashboard/documentation/set-up-table-view/vue (linkStyle))

[Table View for Survey Results in an HTML/CSS/JavaScript Application](https://surveyjs.io/dashboard/documentation/set-up-table-view/html-css-javascript (linkStyle))

## Files

### `public/index.html`

```html
<div id="loadingIndicator" class="data-loading-indicator-panel">
  <div class="data-loading-indicator">
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_17928_11482)">
        <path d="M32 64C14.36 64 0 49.65 0 32C0 14.35 14.36 0 32 0C49.64 0 64 14.35 64 32C64 49.65 49.64 64 32 64ZM32 4C16.56 4 4 16.56 4 32C4 47.44 16.56 60 32 60C47.44 60 60 47.44 60 32C60 16.56 47.44 4 32 4Z" fill="#E5E5E5" />
        <path d="M53.2101 55.2104C52.7001 55.2104 52.1901 55.0104 51.8001 54.6204C51.0201 53.8404 51.0201 52.5704 51.8001 51.7904C57.0901 46.5004 60.0001 39.4704 60.0001 31.9904C60.0001 24.5104 57.0901 17.4804 51.8001 12.1904C51.0201 11.4104 51.0201 10.1404 51.8001 9.36039C52.5801 8.58039 53.8501 8.58039 54.6301 9.36039C60.6701 15.4004 64.0001 23.4404 64.0001 31.9904C64.0001 40.5404 60.6701 48.5704 54.6301 54.6204C54.2401 55.0104 53.7301 55.2104 53.2201 55.2104H53.2101Z" fill="#19B394" />
      </g>
      <defs>
        <clipPath id="clip0_17928_11482">
          <rect width="64" height="64" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</div>
<div id="surveyDashboardComponent"></div>
```

### `src/surveydata.js`

```js
function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateData() {
    const data = [];
    for (let index = 0; index < 100; index++) {
        data.push({
            nps: randomIntFromInterval(0, 10),
            "did-recommend": randomIntFromInterval(0, 1),
            "product-discovery": randomIntFromInterval(1, 7),
            "uses-product": randomIntFromInterval(0, 1),
            "used-libraries": [ randomIntFromInterval(1, 2), randomIntFromInterval(3, 4) ],
            "js-frameworks": randomIntFromInterval(1, 14),
            "backend-languages": randomIntFromInterval(1, 8),
            "devices-to-support": [ 1, randomIntFromInterval(2, 3) ]
        });
    }
    return data;
}
export const dataFromServer = generateData();
```

### `src/SurveyDashboardComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import "tabulator-tables/dist/css/tabulator.min.css";
import "survey-analytics/survey.analytics.tabulator.min.css";

import jsPDF from "jspdf";
import { applyPlugin } from "jspdf-autotable";
applyPlugin(jsPDF);
import * as XLSX from "xlsx";
import { Tabulator } from "survey-analytics/survey.analytics.tabulator";

import "./index.css";
import { json } from "./json";
import "survey-core/survey-core.min.css";
import { dataFromServer } from "./surveydata";

class SurveyDashboardComponent extends React.Component {
    componentDidMount() {
        const survey = new Model(json);
        // Imitate an asynchronous call that loads data from a server
        setTimeout(() => {
        
            const dashboard = new Tabulator(survey, dataFromServer, { jspdf: jsPDF, xlsx: XLSX });
            document.getElementById("loadingIndicator").style.display = "none";
            dashboard.render("surveyDashboardContainer");
            
        }, 1000);
    }
    render() {
        return React.createElement("div", { id: "surveyDashboardContainer" });
    }
}

export default SurveyDashboardComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
.data-loading-indicator-panel {
    width: 100%;
    height: 400px;
}
.data-loading-indicator {
    position: relative;
    width: 64px;
    height: 64px;
    left: calc((100% - 64px)/ 2);
    top: calc((100% - 64px)/ 2);
    animation: data-loading-indicator-spinner 1s infinite linear;
}
@keyframes data-loading-indicator-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyDashboardComponent from "./SurveyDashboardComponent";

const root = createRoot(document.getElementById("surveyDashboardComponent"));
root.render(<SurveyDashboardComponent />);
```

### `src/json.js`

```js
export const json = {
  "pages": [
    {
      "name": "promotion",
      "elements": [
        {
          "type": "rating",
          "name": "nps",
          "title": "How likely are you to recommend our product to a friend or colleague?",
          "isRequired": true,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "Most unlikely",
          "maxRateDescription": "Most likely"
        },
        {
          "type": "radiogroup",
          "name": "did-recommend",
          "title": "Have you recommended our product to anyone?",
          "choices": [
            { "value": 1, "text": "Yes" },
            { "value": 0, "text": "No" }
          ]
        }
      ]
    },
    {
      "name": "customer-segregation",
      "elements": [
        {
          "type": "radiogroup",
          "name": "product-discovery",
          "title": "How did you first discover our product?",
          "choices": [
            { "value": 1, "text": "Search engine" },
            { "value": 2, "text": "GitHub" },
            { "value": 3, "text": "Friend or colleague" },
            { "value": 4, "text": "Reddit" },
            { "value": 5, "text": "Medium" },
            { "value": 6, "text": "Twitter" },
            { "value": 7, "text": "Facebook" }
          ]
        },
        {
          "type": "radiogroup",
          "name": "uses-product",
          "title": "Do you currently use our libraries?",
          "isRequired": true,
          "choices": [
            { "value": 1, "text": "Yes" },
            { "value": 0, "text": "No" }
          ]
        },
        {
          "type": "checkbox",
          "name": "used-libraries",
          "visibleIf": "{uses-product} = 1",
          "title": "Which libraries do you use?",
          "isRequired": true,
          "choices": [
            { "value": 1, "text": "Form Library" },
            { "value": 2, "text": "Survey Creator" },
            { "value": 3, "text": "Dashboard" },
            { "value": 4, "text": "PDF Generator" }
          ]
        }
      ]
    },
    {
      "name": "frameworks-and-devices",
      "elements": [
        {
          "type": "checkbox",
          "name": "js-frameworks",
          "title": "Which JavaScript frameworks do you use?",
          "choices": [
            { "value": 1, "text": "React" },
            { "value": 2, "text": "Angular" },
            { "value": 3, "text": "jQuery" },
            { "value": 4, "text": "Vue.js" },
            { "value": 5, "text": "Meteor" },
            { "value": 6, "text": "Ember" },
            { "value": 7, "text": "Backbone" },
            { "value": 8, "text": "Knockout" },
            { "value": 9, "text": "Aurelia" },
            { "value": 10, "text": "Polymer" },
            { "value": 11, "text": "Mithril" },
            { "value": 12, "text": "Svelte" },
            { "value": 13, "text": "Remix" },
            { "value": 14, "text": "Next.js" }
          ],
          "choicesOrder": "asc",
          "colCount": 3
        },
        {
          "type": "checkbox",
          "name": "backend-languages",
          "title": "Which backend programming languages do you use?",
          "choices": [
            { "value": 1, "text": "Java" },
            { "value": 2, "text": "Python" },
            { "value": 3, "text": "JavaScript / Node.js" },
            { "value": 4, "text": "Go" },
            { "value": 5, "text": "Django" },
            { "value": 6, "text": "C# / ASP.NET" },
            { "value": 7, "text": "Ruby" },
            { "value": 8, "text": "PHP" }
          ],
          "choicesOrder": "asc",
          "colCount": 3
        },
        {
          "type": "checkbox",
          "name": "devices-to-support",
          "title": "Which device types do you need to support?",
          "isRequired": true,
          "choices": [
            { "value": 1, "text": "Desktop" },
            { "value": 2, "text": "Tablet" },
            { "value": 3, "text": "Mobile" }
          ]
        }
      ]
    }
  ]
};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "jspdf": "4.2.1",
    "jspdf-autotable": "3.5.20",
    "xlsx": "0.18.5",
    "tabulator-tables": "6.3.1",
    "chart.js": "4.5.1",
    "survey-analytics": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/dashboard/examples/export-survey-results-to-csv-files/angular.md)
- [Vue 3](https://surveyjs.io/dashboard/examples/export-survey-results-to-csv-files/vue3js.md)
- [jQuery](https://surveyjs.io/dashboard/examples/export-survey-results-to-csv-files/jquery.md)
- [Vanilla JS](https://surveyjs.io/dashboard/examples/export-survey-results-to-csv-files/vanillajs.md)