React Ant Design table filtering not working

Question

I am trying to implement the ant design table filtering functionality within my react component, however, I am having an issue displaying the actual values of the data I am trying to filter through. The data is populated in the array (this.state.data) and the drop down displays the actual length of data in the array but no actual visible data/values of the names I am trying to display. Any help would be much appreciated.

    const registeredUsersColumns = [
  {
    title: "Name",
    dataIndex: "Name",
    key: "1",
    filters: this.state.data,
    onFilter: (value, record) => record.Name.indexOf(value) === 0,
  }]

Answer 1

OnFilter 必须返回这个值： record[indexOftheFiltringColumn]

Answer 2

To obtain the desired behavior change .indexOf to .includes :

onFilter: (value, record) => record.name.includes(value),

// and 

onFilter: (value, record) => record.address.includes(value),

Fixed CodeSanbox link .