useSearch

The useSearch plugin adds basic search functionality to the DataTable.

Without providing any configuration to the plugin, it will perform a string match on each column in every row to determine whether the row should be displayed.

Result

Loading...

Live Editor

const columns = [ { id: 'demo-component-one-name', key: 'name', label: 'Name', }, { id: 'demo-component-one-income', key: 'income', label: 'Income', }, { id: 'demo-component-one-type', key: 'type', label: 'Type', }, ]; const data = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', }, { id: 2, name: 'Larry', income: null, type: 'business', }, { id: 3, name: 'Curly', income: 1, type: 'other', }, ]; const Example = () => { const useSearchPlugin = useSearch(); return ( <DataTable id="demo-component" columns={columns} data={data} plugins={[useSearchPlugin]} title="Clients" responsive stacked /> ); }; render(<Example />);

const columns = [
  {
    id: 'demo-component-one-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'demo-component-one-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'demo-component-one-type',
    key: 'type',
    label: 'Type',
  },
];

const data = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
  },
];

const Example = () => {
  const useSearchPlugin = useSearch();

  return (
    <DataTable
      id="demo-component"
      columns={columns}
      data={data}
      plugins={[useSearchPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

With Custom Search Filter

If you'd like to customize the search functionality of the useSearch plugin, you can provide a configuration object to the useSearch hook with a filterMethod defined. Your filterMethod callback should return the filtered set of data.

NOTE: When providing a custom filter method, make sure to ignore the id field in each row. Otherwise you run the risk of displaying a row that matches based on the ID but not on any of the columns that are displayed to the user.

Result

Loading...

Live Editor

const columns = [ { id: 'demo-component-custom-name', key: 'name', label: 'Name', }, { id: 'demo-component-custom-income', key: 'income', label: 'Income', }, { id: 'demo-component-custom-type', key: 'type', label: 'Type', }, ]; const data = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', }, { id: 2, name: 'Larry', income: null, type: 'business', }, { id: 3, name: 'Curly', income: 1, type: 'other', }, ]; const Example = () => { const [isLoading, setIsLoading] = React.useState(false); const useSearchPlugin = useSearch({ filterMethod: (searchedValue) => { setIsLoading(true); const searchedValueLower = searchedValue.toLowerCase(); const nextData = data.filter((row) => { let foundSomething = false; columns.forEach((column) => { if (column.key !== 'id') { let cellContents = row[column.key]; if (typeof cellContents === 'number') { cellContents = `${cellContents}`; } if (typeof cellContents === 'string') { if (cellContents.toLowerCase().includes(searchedValueLower)) { foundSomething = true; } } } }); return foundSomething; }); setIsLoading(false); return nextData; }, }); return ( <DataTable id="demo-component-with-search-filter" columns={columns} data={data} plugins={[useSearchPlugin]} title="Clients" loading={isLoading} responsive stacked /> ); }; render(<Example />);

const columns = [
  {
    id: 'demo-component-custom-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'demo-component-custom-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'demo-component-custom-type',
    key: 'type',
    label: 'Type',
  },
];

const data = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
  },
];

const Example = () => {
  const [isLoading, setIsLoading] = React.useState(false);
  const useSearchPlugin = useSearch({
    filterMethod: (searchedValue) => {
      setIsLoading(true);
      const searchedValueLower = searchedValue.toLowerCase();

      const nextData = data.filter((row) => {
        let foundSomething = false;

        columns.forEach((column) => {
          if (column.key !== 'id') {
            let cellContents = row[column.key];

            if (typeof cellContents === 'number') {
              cellContents = `${cellContents}`;
            }

            if (typeof cellContents === 'string') {
              if (cellContents.toLowerCase().includes(searchedValueLower)) {
                foundSomething = true;
              }
            }
          }
        });

        return foundSomething;
      });

      setIsLoading(false);

      return nextData;
    },
  });

  return (
    <DataTable
      id="demo-component-with-search-filter"
      columns={columns}
      data={data}
      plugins={[useSearchPlugin]}
      title="Clients"
      loading={isLoading}
      responsive
      stacked
    />
  );
};

render(<Example />);

With Async Data

If your search requires an asynchronous call to fetch a new set of data, you can provide an onSearch and an onClear callback in the configuration object for the useSearch hook. Unlike the filterMethod example above, your onSearch and onClear callbacks should ultimately update your data array stored in state so you can pass it back down into the DataTable through the data prop.

Result

Loading...

Live Editor

const columns = [ { id: 'async-name', key: 'name', label: 'Name', }, { id: 'async-income', key: 'income', label: 'Income', }, { id: 'async-type', key: 'type', label: 'Type', }, ]; const initialData = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', }, { id: 2, name: 'Larry', income: null, type: 'business', }, { id: 3, name: 'Curly', income: 1, type: 'other', }, ]; const Example = () => { const [data, setData] = React.useState(initialData); const [isLoading, setIsLoading] = React.useState(false); const makeRequest = async (searchedValue) => { await new Promise((resolve) => setTimeout(() => { const nextData = initialData.filter((row) => { let foundSomething = false; columns.forEach((column) => { if (column.key !== 'id') { let cellContents = row[column.key]; if (typeof cellContents === 'number') { cellContents = `${cellContents}`; } if (typeof cellContents === 'string') { if (cellContents.toLowerCase().includes(searchedValue.toLowerCase())) { foundSomething = true; } } } }); return foundSomething; }); setData(nextData); resolve(); }, 3000), ); }; const useSearchPlugin = useSearch({ filterMethod: () => data, onSearch: async (event, searchedValue) => { setIsLoading(true); await makeRequest(searchedValue); setIsLoading(false); }, onClear: () => { setData(initialData); }, }); return ( <DataTable id="demo-component-with-async" columns={columns} data={data} plugins={[useSearchPlugin]} title="Clients" loading={isLoading} responsive stacked /> ); }; render(<Example />);

const columns = [
  {
    id: 'async-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'async-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'async-type',
    key: 'type',
    label: 'Type',
  },
];

const initialData = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
  },
];

const Example = () => {
  const [data, setData] = React.useState(initialData);
  const [isLoading, setIsLoading] = React.useState(false);

  const makeRequest = async (searchedValue) => {
    await new Promise((resolve) =>
      setTimeout(() => {
        const nextData = initialData.filter((row) => {
          let foundSomething = false;

          columns.forEach((column) => {
            if (column.key !== 'id') {
              let cellContents = row[column.key];

              if (typeof cellContents === 'number') {
                cellContents = `${cellContents}`;
              }

              if (typeof cellContents === 'string') {
                if (cellContents.toLowerCase().includes(searchedValue.toLowerCase())) {
                  foundSomething = true;
                }
              }
            }
          });

          return foundSomething;
        });

        setData(nextData);

        resolve();
      }, 3000),
    );
  };

  const useSearchPlugin = useSearch({
    filterMethod: () => data,
    onSearch: async (event, searchedValue) => {
      setIsLoading(true);
      await makeRequest(searchedValue);
      setIsLoading(false);
    },
    onClear: () => {
      setData(initialData);
    },
  });

  return (
    <DataTable
      id="demo-component-with-async"
      columns={columns}
      data={data}
      plugins={[useSearchPlugin]}
      title="Clients"
      loading={isLoading}
      responsive
      stacked
    />
  );
};

render(<Example />);

Statefully Managed

Result

Loading...

Live Editor

const columns = [ { id: 'stateful-name', key: 'name', label: 'Name', }, { id: 'stateful-income', key: 'income', label: 'Income', }, { id: 'stateful-type', key: 'type', label: 'Type', }, ]; const data = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', }, { id: 2, name: 'Larry', income: null, type: 'business', }, { id: 3, name: 'Curly', income: 1, type: 'other', }, ]; const Example = () => { const [searchValue, setSearchValue] = React.useState('curly'); const useSearchPlugin = useSearch({ searchValue, onSearchValueChange: (event, payload) => setSearchValue(payload.value), }); return ( <DataTable id="demo-component-stateful" columns={columns} data={data} plugins={[useSearchPlugin]} title="Clients" responsive stacked /> ); }; render(<Example />);

const columns = [
  {
    id: 'stateful-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'stateful-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'stateful-type',
    key: 'type',
    label: 'Type',
  },
];

const data = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
  },
];

const Example = () => {
  const [searchValue, setSearchValue] = React.useState('curly');
  const useSearchPlugin = useSearch({
    searchValue,
    onSearchValueChange: (event, payload) => setSearchValue(payload.value),
  });

  return (
    <DataTable
      id="demo-component-stateful"
      columns={columns}
      data={data}
      plugins={[useSearchPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

Plugin

PluginProperties

Type: Object

Properties

• filterMethod A custom method used to filter the data by the searched value when the search is submitted. Must return the filtered data.
• searchValue string When statefully managing this plugin, initializes the submitted search state and updates the search input on change.
• onSearchValueChange A callback that is fired when the search value changes.
• onSearch Callback that is called when the search is submitted.
• onClear Callback that is called when the search clear button is clicked.

useSearch

Create a plugin hook that enables DataTable searching by adding the search component to the table bar.

Parameters

• props (optional, default {})

Returns Plugin

filterMethod

Type: Function

Parameters

• searchedValue string The submitted text value from the search input.

Returns Array<Object> The filtered data (rows).

onSearch

Type: Function

Parameters

• event React.SyntheticEvent The submit event.
• searchedValue string The submitted text value from the search input.

onSearchValueChange

Type: Function

Parameters

• event React.SyntheticEvent The change event.
• payload Object An object containing the value of the search input.

onChange

Callback method when input value is changed.

Parameters

• event React.ChangeEvent
• payload Object
  • payload.value string
  • payload.filter object

Returns any void

Meta

• deprecated: As of v11 payload will no longer include filter. Use onFilterChange instead.

onBlur

Callback method when input is blurred.

Parameters

• event React.FocusEvent
• payload Object
  • payload.value string

Returns any void

onSubmit

Callback when submitted.

Parameters

• event React.MouseEvent
• payload Object
  • payload.value string
  • payload.filter object

Returns any void

onClear

Callback method when clear button is clicked.