#grid-container {
  width: 1000px;
  height: 600px;
  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, {
  defaultColumnOptions: {
    searchable: true
  }
});
grid.render();

document.getElementById("search-btn").addEventListener("click", () => {
  const searchText = document.getElementById("search-text").value;
  grid.search(searchText);
});

document.getElementById("reset-btn").addEventListener("click", () => {
  grid.resetSearch();
});