Calling Developers!
We are reenergizing our code contribution process! Learn More

is there something existing in spryker zed table which can be used to enable column based search?

Options
chandan.k
chandan.k Senior Software Developer Spryker Solution Partner Posts: 5 🧑🏻‍🚀 - Cadet

Answers

  • chandan.k
    chandan.k Senior Software Developer Spryker Solution Partner Posts: 5 🧑🏻‍🚀 - Cadet
    edited August 2023
    Options

    like there will be a search input box on top of each column,and as the user types,it will search for that respective column only

    the $config->setSearchableColumns isn't working

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 71 🏛 - Council (mod)
    Options

    setSearchableColumns() is used only on the backend for building the query based on those settings and it doesn't have to do with the frontend part, which is based on datatables.net
    I haven't seen an example like the one you're asking but it would be easy to create once you have access to the datatable instance or by overriding the Datatable logic at project level in the GUI module.

    To override the way Datatables work, or any Zed table, at project level you should:

    1. Prepare an oryx-for-zed configuration file so it detects the changes made at project level:
      Here are the instructions :

    https://docs.spryker.com/docs/scos/dev/front-end-development/202307.0/zed/oryx-for-zed.html

    https://docs.spryker.com/docs/scos/dev/front-end-development/202307.0/zed/overriding-webpack-js-scss-for-zed-on-project-level.html#webpack

    2. Override any twig template, scss or js file for datatables as needed

    Create the same folder structure as the core one if you'd like to override a datable configuration such as a Datable class and the Communication Factory which creates the Datatable instance

    3. For the datable's javascript logic, create an assets foder and inside a Zed/js folder . In js folder, you should have file with. *entry.js file name so that oryx-for-zed can detect any change in Zed/js folder .

    Execute from the console: npm run zed:watch. or node ./frontend/zed/build --dev

    Execute

    From this point on, it all depends on datatables.net and not on Spryker

    Write your javascript logic on DomReady. Example:

    $(document).ready(() => {
    // adjust to match your table class or id
            const table = $('.gui-table-data');
            // Here you have access to columns configurations such as sortable, searchable
            const cols = JSON.parse(table.attr('data-columns'));
            const dt = table.dataTable();
                    
    //From this point on, follow Datatables.net examples
        
        dt.api()
        .columns()
        .every(function () {
             // this scope bound to the column api
       
        });
    });
    

    You can find some examples in core module on how to interact with data tables, product-category for example,

    Here are some screenshots of a quick example I made to show I could access the datatable from product management:

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 71 🏛 - Council (mod)
    Options

    If you prefer the sorting column at the bottom of the table, then you just have to override the AbstractTable config and add the searchable columns with key⇒ val . Key is the column key and val the table column that matches the column:

    <?php
    
    namespace Pyz\Zed\ProductManagement\Communication\Table;
    
    use Orm\Zed\Product\Persistence\Map\SpyProductAbstractTableMap;
    use Orm\Zed\Tax\Persistence\Map\SpyTaxSetTableMap;
    use Spryker\Zed\Gui\Communication\Table\TableConfiguration;
    use Spryker\Zed\ProductManagement\Communication\Table\ProductTable as SprykerProductTable;
    
    class ProductTable extends SprykerProductTable
    {
    protected function configure(TableConfiguration $config)
    {
    $config = parent::configure($config);
    $config->setSearchableColumns(
    [
       static::COL_SKU => SpyProductAbstractTableMap::COL_SKU,
       static::COL_ID_PRODUCT_ABSTRACT => SpyProductAbstractTableMap::COL_ID_PRODUCT_ABSTRACT,
       static::COL_TAX_SET => SpyTaxSetTableMap::COL_NAME
    
    ]
    );
    
    
            return $config;
    }
    
    }