{
  "id": "SU03",
  "title": "Search in a grid",
  "topic": "search",
  "use": "The search in a grid's toolbar narrows the rows to those that contain the term and marks nothing in them. Use it where the user looks for records in one list and goes on with the rows that are left; to find a place in a page, take SU02, and to reach a record from anywhere, SU01.",
  "decisions": [
    "The search narrows the rows to those that contain the term, while the user types, and marks nothing in the cells: what is left is the answer, and a row that stays is a match.",
    "The search field is the grid's own, at the start of its toolbar, and the grid counts below it — '3 of 10 entries': the count says how much of the list is left.",
    "The search looks only in the columns the empty state names, the others say searchable: false: a term found in a column the user did not think of makes a row stay that seems not to match.",
    "Where nothing is left, the empty state repeats the term and says where it was looked for, so a typing error or the wrong column can be seen.",
    "Escape empties the search field and brings every row back, as any field with a clear button does."
  ],
  "try": [
    {
      "do": "Type “sales” into the search field",
      "then": "the three employees in Sales are left, the count reads 3 of 10 entries, and nothing is marked in the rows"
    },
    {
      "do": "Type a part of a personnel number, such as “0147”",
      "then": "Hans-Jürgen Odenthal is left alone"
    },
    {
      "do": "Type a city, such as “Saarlouis”",
      "then": "no row is left, as the location is not searched: the empty state names “Saarlouis” and the columns it looked in"
    },
    {
      "do": "Press Escape in the search field",
      "then": "the field empties, and all ten employees are back"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": false,
  "source": "<!-- Demo only, not part of the pattern. The grid takes the height the screen leaves it; here it is set to fit the frame. -->\n\n<div class=\"ed-stack ed-gap-4\">\n  <!-- Demo only, not part of the pattern. The screen's title comes from the screen around the pattern; SC01 places it. -->\n\n  <ed-data-grid id=\"su03-grid\" label=\"Employees\" with-search data-ed-preload=\"ed-format-date\">\n    <ed-empty-state slot=\"no-results\" size=\"small\" icon=\"search\">\n      <span id=\"su03-none\" slot=\"label\"></span>\n      <span>The search looks in the personnel number, the name and the department.</span>\n    </ed-empty-state>\n  </ed-data-grid>\n</div>\n\n<!-- Demo only, not part of the pattern. The product supplies employees: the employees of the list, as { id, name, department, location, since }, with since as YYYY-MM-DD. -->\n\n<script type=\"module\">\n  const grid = document.getElementById('su03-grid');\n  const none = document.getElementById('su03-none');\n\n  const day = value => Object.assign(document.createElement('ed-format-date'), { date: value, month: 'short', day: 'numeric', year: 'numeric' });\n\n  // The search covers what the empty state names: personnel number, name and department.\n  grid.columns = [\n    { field: 'id', label: 'Personnel no.', width: 140 },\n    { field: 'name', label: 'Name', flex: 2, minWidth: 200, rowheader: true },\n    { field: 'department', label: 'Department', flex: 1, minWidth: 160 },\n    { field: 'location', label: 'Location', width: 160, searchable: false },\n    { field: 'since', label: 'Employed since', width: 160, formatter: day, searchable: false }\n  ];\n\n  // The empty state repeats the term as the grid searches it, a trailing space included, so a typing\n  // error in it can be seen.\n  grid.addEventListener('ed-data-grid-filter-change', event => {\n    none.textContent = `No match for “${event.detail.searchTerm}”`;\n  });\n\n  await customElements.whenDefined('ed-data-grid');\n  grid.data = employees;\n</script>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/search/su03-search-in-a-grid/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/search/"
}