is there something existing in spryker zed table which can be used to enable column based search?
Answers
-
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
0 -
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:
- Prepare an oryx-for-zed configuration file so it detects the changes made at project level:
Here are the instructions :
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
. ornode ./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:
0 - Prepare an oryx-for-zed configuration file so it detects the changes made at project level:
-
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; } }
3
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 69 Spryker News
- 896 Developer Corner
- 758 Spryker Development
- 83 Spryker Dev Environment
- 361 Spryker Releases
- 3 Oryx frontend framework
- 34 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 23 Job Opportunities
- 3.2K ๐ Slack Archives
- 116 Academy
- 5 Business Users
- 370 Docker
- 551 Slack General
- 2K Help
- 75 Knowledge Sharing
- 6 Random Stuff
- 4 Code Testing
- 32 Product & Business Questions
- 68 Spryker Safari Questions
- 50 Random