ipydatagrid icon indicating copy to clipboard operation
ipydatagrid copied to clipboard

Is it possible to add search functionality?

Open jgunstone opened this issue 3 years ago • 3 comments

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.

image

jgunstone avatar May 13 '21 09:05 jgunstone

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!

ibdafna avatar May 14 '21 05:05 ibdafna

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

joseberlines avatar Jul 20 '21 06:07 joseberlines

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

jgunstone avatar Oct 22 '21 13:10 jgunstone