Is it possible to add search functionality?

[jgunstone]

just came across this new widget and it looks awesome! there are many datagrid solutions available in Jupyter but each has there own drawback - this looks like a no compromise solution for every datagrid need. I can't wait to use it in my next project! One feature that i'd love to see:

Is your feature request related to a problem? Please describe. When reviewing data in a datagrid, I find a general search bar to be very useful, and often a quicker route to finding what you want as compared to column filters

Describe the solution you'd like I'd like the datagrid to have a optional search bar UI. Ideally with the following options:

• 1no search bar for the whole datagrid
• optionally adding a search bar for a given column heading

Describe alternatives you've considered The column filters already implemented provide some of the required functionality.

Additional context AG-Grid (and ipyaggrid) provide this functionality and it works really well. Something directly equivalent to that would be ideal.

[ibdafna]

Hello 👋 @gunstonej and welcome to the ipydatagrid community!

Thanks for the feature suggestion, it definitely looks useful. You can probably achieve a similar outcome by filtering the data on the pandas side and then setting the filtered DataFrame as the new data model for the grid, although that's not an elegant solution at all.

I'll keep this PR open to track the interest from other users in the community - it will help prioritise future work.

Thanks!

[joseberlines]

As an example in the same "family" a data table by #ipyvuetify shows automatically a search filter. That said the solution proposed is also really good since you can have custom search fields used to filter pandas and pass the filtered pandas to ipydatagrid

[jgunstone]

here is an example of a simple class that implements the search functionality for a named column on a DataGrid.

whilst I still think it would be great if this functionality was available out-the-box implementing as @ibdafna described was pretty straightforward. thanks for the tip!

import ipydatagrid as ipg
import pandas as pd
import ipywidgets as widgets

class SearchSelectDatagrid:
    out = widgets.Output()
    base_column_size=600
    def __init__(self, df, search_col):
        self.df = df
        self.search_col = search_col
        self._df_filt = self.df.copy(deep=True)
        self.gr = ipg.DataGrid(self.df_filt,base_column_size=self.base_column_size, selection_mode="row")
        self.filter_string = widgets.Text(placeholder='search')
        self.app = widgets.VBox([self.filter_string, self.gr])
        self._init_controls()

    def _init_controls(self):
        self.filter_string.observe(self.control_filter_string, 'value')

    def control_filter_string(self, onchange):
        self.df_filt = self.df[self.df[self.search_col].str.contains(self.filter_string.value,case=False)]

    @property
    def df_filt(self):
        return self._df_filt

    @df_filt.setter
    def df_filt(self, df_filt):
        self._df_filt = df_filt
        self.gr.data = df_filt

    def display(self):
        display(self.out)
        with self.out:
            display(self.app)

    def _ipython_display_(self):
        self.display()

li_pdts = ['AirGrilleDiffuser.pdt.xlsx',
 'AirHeaterGasOil.pdt.xlsx',
 'AirToWaterHeatPump.pdt.xlsx',
 'BespokeLVAssembly.pdt.xlsx',
 'Boiler.pdt.xlsx',
 'BurnerGasOil.pdt.xlsx',
 'BusbarSystems.pdt.xlsx',
 'CableLadderSystems.pdt.xlsx',
 'CableTraySystem.pdt.xlsx',
 'CavityFloorGrommet.pdt.xlsx',
 'CircuitBreakersForOvercurrentProtection.pdt.xlsx',
 'COBieParameters.pdt.xlsx',
 'CombinedHeatandPower.pdt.xlsx',
 'CoolingCoil.pdt.xlsx',
 'CutOutAssemblies.pdt.xlsx',
 'DeaeratorAndDirtSeparator.pdt.xlsx',
 'DistributionSkirtingDadoTrunking.pdt.xlsx',
 'DuctedFumeCupboards.pdt.xlsx',
 'ElectricalJunctionBox.pdt.xlsx',
 'ElectricalPanelLV.pdt.xlsx']

df_pdts = pd.DataFrame.from_dict({'Product Data Templates':li_pdts})
gr = SearchSelectDatagrid(df_pdts, 'Product Data Templates')
gr