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

chandan.k

chandan.k

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

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

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;
}

}