Display table with filtered data

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.3.2/dataTables.min.js"></script>
<table id="t1">
  <thead>
    <tr>
      <th>Col</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

const table = $('#t1').DataTable({
  data: [
    {greeting: 'Hi'},
    {greeting: 'Hello'},
    {greeting: 'Good Morning'},
  ],
  columns: [
    {data: 'greeting'}
  ],
  initComplete: (settings) => {
    const dataTableApi = new $.fn.dataTable.Api(settings)
    dataTableApi.search.fixed('startsWith', (string, object) => {
      return object.greeting.startsWith('H')
    })
    dataTableApi.draw()
  },
  /*initComplete: (settings) => {
    const dataTableApi = new $.fn.dataTable.Api(settings)
    DataTable.ext.search.push((settings, searchData, index, rowData) => {
      return rowData.greeting.startsWith('H')
    })
    dataTableApi.draw()
  }*/
})