The placeholder attribute sets the message shown when the table has no records at all. It defaults to "No Records". The separate filtered-placeholder attribute sets the message shown when records exist but all have been filtered or hidden — if not set, no row is shown in that case.

Default Placeholder

An empty table shows "No Records" by default. No attribute needed.

<k-table id=emptyTableExample></k-table>
<script type=module>
  await window.customElements.whenDefined('k-table');
  document.getElementById('emptyTableExample').setData({
    fields: [{
      name: 'name',
      label: 'Name'
    }, {
      name: 'role',
      label: 'Role'
    }],
    records: []
  })
</script>

Custom Placeholder

Set the placeholder attribute to override the default text.

<k-table id=customPlaceholderExample placeholder='No contacts found.'></k-table>
<script type=module>
  await window.customElements.whenDefined('k-table');
  document.getElementById('customPlaceholderExample').setData({
    fields: [{
      name: 'name',
      label: 'Name'
    }, {
      name: 'email',
      label: 'Email'
    }],
    records: []
  })
</script>

Filtered Placeholder

Use filtered-placeholder to show a distinct message when records exist but all are filtered out. Try searching for something that does not match any record below.

<k-table id=filteredTableExample filtered-placeholder='No records match your search.'><kc-tc-search slot=top style='width: 20rem'></kc-tc-search></k-table>
<script type=module src=/src/components/controls/TcSearch.js></script>
<script type=module>
  await window.customElements.whenDefined('k-table');
  document.getElementById('filteredTableExample').setData({
    fields: [{
      name: 'name',
      label: 'Name'
    }, {
      name: 'city',
      label: 'City'
    }],
    records: [{
      name: 'Alice',
      city: 'New York'
    }, {
      name: 'Bob',
      city: 'Chicago'
    }, {
      name: 'Charlie',
      city: 'Houston'
    }]
  })
</script>