Untitled

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DataGrid: Advanced Filter Tests</title>

    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../polymer/polymer.html" />
    <link rel="import" href="../px-theme/px-theme-styles.html">
    <link rel="import" href="px-data-grid.html" />
    <link rel="import" href="px-data-grid-paginated.html" />

    <style is="custom-style">
      html, body {
        margin: 10px;
        font-size: 15px;
      }
    </style>

    <custom-style>
      <style include="px-theme-styles" is="custom-style"></style>
    </custom-style>

  </head>

<body>
  <dom-bind >
  <template is="dom-bind" id="table" >


    <div style="height:850px; width:850px">
    <h2>Filterable Paginated </h2>
      <px-data-grid-paginated
      table-data='[
          {
            "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
            "Correlated Tags": "15",
            "Temp" :"37.5",
            "Units": "celsius",
            "Description": "This is a test for filtering data in celsius",
            "Maintenance Date": "04-12-1985",
            "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
            "Domain": "GE_SanRamon1100",
            "Location" : "North America",
            "Timezone" :"PST"
          },
          {
            "Tag Name coz we like really long names": "Tag_Temperature_With_Data_15",
            "Correlated Tags": "15",
            "Temp" :"10.23",
            "Units": "Some fancy temperature units",
            "Description": "This is a test for filtering data",
            "Maintenance Date": "04-12-1985",
            "Asset": "Tag_Temperature_With_Data_15 GE_SAN_RAMON_1111111",
            "Domain": "GE_SanRamon1100",
            "Location" : "North America",
            "Timezone" :"PST"
          },
          {
            "Tag Name coz we like really long names": "Tag_Temperature_With_Data_14",
            "Correlated Tags": "14",
            "Units": "Fahrenheit",
            "Temp" :"7654.111",
            "Description": "This is a test for filtering data in fahrenheit not in celsius",
            "Maintenance Date": "04-12-1985",
            "Asset": "Tag_Temperature_With_Data_14 GE_SAN_RAMON_1111111",
            "Domain": "GE_Brazil_1100",
            "Location" : "South America",
            "Timezone" :"PST"
          },
          {
            "Tag Name coz we like really long names": "Tag_Temperature_With_Data_19",
            "Correlated Tags": "19",
            "Units": "celsius",
            "Temp" :"6",
            "Description": "This is AViD Tag Temperature Type description in celsius",
            "Maintenance Date": "10-12-1994",
            "Asset": "Tag_Temperature_With_Data_19 GE_SAN_RAMON_1111111",
            "Domain": "GE_Chile_1111",
            "Location" : "South America",
            "Timezone" :"PST"
          },
          {
            "Tag Name coz we like really long names": "Tag_pressure_With_Data_48",
            "Correlated Tags": "48",
            "Units": "at",
            "Temp" :"1210.2234",
            "Description": "This is AViD Tag pressure2 Type description in celsius",
            "Maintenance Date": "1995-11-13",
            "Asset": "Tag_pressure_With_Data_48 GE_SAN_RAMON_1111111",
            "Domain": "GE_Brazil_1111",
            "Location" : "South America",
            "Timezone" :"PST"
          },
          {
            "Tag Name coz we like really long names": "Tag_Temperature_With_Data_05",
            "Correlated Tags": "05",
            "Units": "Celsius",
            "Temp" :"98.33233",
            "Description": ".../unit15/This is AViD Tag Temperature Type description",
            "Maintenance Date": "1996-12-12",
            "Asset": "Tag_Temperature_With_Data_05 GEffSAN_RAMON_1111111",
            "Domain": "GE_Dubai_1145",
            "Location" : "Asia",
            "Timezone" :"PST"
          }
        ]'
      columns='[
      {
        "name":"Tag Name coz we like really long names",
        "path":"Tag Name coz we like really long names",
        "hidden":false,
        "editable":false,
        "frozen":false,
        "id":"Tag Name coz we like really long names[string]"
      },
      {
        "name":"Correlated_Tag_Data",
        "type": "number",
        "path":"Correlated Tags",
        "hidden":false,
        "editable":true,
        "frozen":false,
        "id":"Correlated Tags[number]",
        "renderer":"px-data-grid-number-renderer",
        "minBound" : 10,
        "maxBound" : 150
      },
      {
        "name":"Temp",
        "type": "number",
        "path":"Temp",
        "hidden":false,
        "editable":true,
        "frozen":false,
        "id":"Temp[number]",
        "renderer":"px-data-grid-number-renderer"
      },
      {
        "name":"Maintenance Date",
        "type": "date",
        "path":"Maintenance Date",
        "hidden":false,
        "editable":true,
        "frozen":false,
        "id":"Maintenance Date[date]",
        "renderer":"px-data-grid-date-renderer"
      },
      {
        "name":"Units",
        "path":"Units",
        "type":"string",
        "editable":true,
        "required":true,
        "frozen":false,
        "id":"Units[string]",
        "renderer":"px-data-grid-string-renderer"
      },
      {
        "name":"Description",
        "path":"Description",
        "type":"string",
        "editable":true,
        "required":true,
        "frozen":false,
        "id":"Description[string]",
        "renderer":"px-data-grid-string-renderer"
      },
      {
        "name":"Asset",
        "path":"Asset",
        "type":"string",
        "editable":true,
        "required":true,
        "frozen":false,
        "renderer":"px-data-grid-string-renderer",
        "id":"Asset[string]"
      },
      {
        "name":"Domain",
        "path":"Domain",
        "type":"string",
        "editable":true,
        "required":true,
        "frozen":false,
        "renderer":"px-data-grid-string-renderer",
        "id":"Domain[string]"

      },
      {
        "name":"Location",
        "path":"Location",
        "type":"string",
        "editable":false,
        "required":true,
        "frozen":false,
        "id":"Location[string]"
      },
      {
        "name":"Timezone",
        "path":"Timezone",
        "type":"string",
        "editable":true,
        "required":true,
        "frozen":false,
        "renderer":"px-data-grid-string-renderer",
        "id":"Timezone[string]"
      }
      ]'
            selection-mode="multi"
            default-column-width="180px"
            flex-to-size
            default-column-flex="0"
            filterable
            editable
            language="en"
            action-menu
            auto-height
            auto-filter

            column-reordering-allowed
            table-actions='[{"name":"Export CSV","id":"CSV"}]'
            item-actions='[{"name":"Add Row","id":"add"},{"name":"Delete Row","id":"delete"}]'
            on-table-action="tableActionListener"
            page-size="5"

          >
      </px-data-grid-paginated>
    </div>
  </template>
</dom-bind>
<script>

  addEventListener('WebComponentsReady', function() {
    var template = document.getElementById('table');
    template.tableActionListener= function(evt) {
      window.alert('Table Action ' + evt.detail.id);
      console.log ("Table Action happening");
      if (evt.detail.id === 'CSV') {
        this.exportToCsv();
      }
    },

    template.exportToCsv= function() {
      const grid = this.shadowRoot.getElementById('table');
      const data = grid.getData();
      const columns = grid._getVisibleColumns();
      let csvContent = 'data:text/csv;charset=utf-8,';

      csvContent += columns.map((column) => grid._resolveColumnHeader(column)).join(',') + '\r\n';
      data.forEach((item) => {
        csvContent += Object.keys(item).map((key) => item[key]).join(',') + '\r\n';
      });

      const encodedUri = encodeURI(csvContent);
      const link = document.createElement('a');
      link.setAttribute('href', encodedUri);
      link.setAttribute('download', 'table_data.csv');
      document.body.appendChild(link);

      link.click();

    }
  });
</script>

</body>
</html>