#grid-container {
  width: 1000px;
  height: 400px;
  margin-left: 50px;
}
.btns {
  margin-left: 50px;
}

var schema = [
  { name: "Season" },
  { name: "DateTime", type: "datetime" },
  { name: "HomeTeam" },
  { name: "AwayTeam" },
  { name: "FTHG", type: "number" },
  { name: "FTAG", type: "number" }
];

var data = [
  ["1993-94", "1993-08-14T00:00:00Z", "Arsenal", "Coventry", 0, 3],
  ["1993-94", "1993-08-14T00:00:00Z", "Aston Villa", "QPR", 4, 1],
  ["1993-94", "1993-08-14T00:00:00Z", "Chelsea", "Blackburn", 1, 2],
  ["1993-94", "1993-08-14T00:00:00Z", "Liverpool", "Sheffield Weds", 2, 0],
  ["1993-94", "1993-08-14T00:00:00Z", "Man City", "Leeds", 1, 1],
  ["1993-94", "1993-08-14T00:00:00Z", "Newcastle", "Tottenham", 0, 1],
  ["1993-94", "1993-08-14T00:00:00Z", "Oldham", "Ipswich", 0, 3],
  ["1993-94", "1993-08-14T00:00:00Z", "Sheffield United", "Swindon", 3, 1],
  ["1993-94", "1993-08-14T00:00:00Z", "Southampton", "Everton", 0, 2],
  ["1993-94", "1993-08-14T00:00:00Z", "West Ham", "Wimbledon", 0, 2],
  ["1993-94", "1993-08-15T00:00:00Z", "Norwich", "Man United", 0, 2],
  ["1993-94", "1993-08-16T00:00:00Z", "Tottenham", "Arsenal", 0, 1],
  ["1993-94", "1993-08-17T00:00:00Z", "Everton", "Man City", 1, 0],
  ["1993-94", "1993-08-17T00:00:00Z", "Ipswich", "Southampton", 1, 0],
  ["1993-94", "1993-08-17T00:00:00Z", "Leeds", "West Ham", 1, 0],
  ["1993-94", "1993-08-17T00:00:00Z", "Wimbledon", "Chelsea", 1, 1],
  ["1993-94", "1993-08-18T00:00:00Z", "Blackburn", "Norwich", 2, 3],
  ["1993-94", "1993-08-18T00:00:00Z", "Coventry", "Newcastle", 2, 1],
  ["1993-94", "1993-08-18T00:00:00Z", "Man United", "Sheffield United", 3, 0],
  ["1993-94", "1993-08-18T00:00:00Z", "QPR", "Liverpool", 1, 3],
  ["1993-94", "1993-08-18T00:00:00Z", "Sheffield Weds", "Aston Villa", 0, 0],
  ["1993-94", "1993-08-18T00:00:00Z", "Swindon", "Oldham", 0, 1],
  ["1993-94", "1993-08-21T00:00:00Z", "Blackburn", "Oldham", 1, 0]
];
var container = document.getElementById("grid-container");
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {
  enableIndex: false
});
var grid = new FusionGrid(container, dataTable, {
  columns: [
    {
      headerName: "Event",
      children: [
        {
          field: "Season"
        },
        {
          field: "DateTime"
        }
      ]
    },
    {
      headerName: "Teams",
      children: [
        {
          field: "HomeTeam"
        },
        {
          field: "AwayTeam"
        }
      ]
    }
  ],
  defaultColumnOptions: {
    searchable: true
  }
});
grid.render();

document.getElementById("csv-btn").addEventListener("click", () => {
  grid.export({ format: "csv" });
});

document.getElementById("json-btn").addEventListener("click", () => {
  console.log(grid.export({ format: "json" }));
});

document.getElementById("xls-btn").addEventListener("click", () => {
  grid.export({ format: "xls" });
});

document.getElementById("getCSVData-btn").addEventListener("click", () => {
  console.log(grid.getCSVData());
});

document.getElementById("mode-view-btn").addEventListener("click", () => {
  grid.export({ format: "csv", mode: "view" });
});

document.getElementById("no-skip-btn").addEventListener("click", () => {
  grid.export({ format: "csv", mode: "view", skipColumnHeaderGroups: false });
});