Datatables searchPane and searchBuilder
Hey,
I'm migrating Keen to version 3. I noticed that when I add searchBuilder and searchPanes modules styles are missing.
Configs are the minimalsdom: 'Qlfrtip'
Search Panes
Search Builder
Replies (5)
Additionally,
I added these three lines to the gulp.config.js "{$config.path.node_modules}/datatables.net-searchpanes/js/dataTables.searchPanes.js",
"{$config.path.node_modules}/datatables.net-searchpanes-bs5/js/searchPanes.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-searchbuilder/js/dataTables.searchBuilder.js",
these to the package.json "datatables.net-searchbuilder": "^1.6.0",
"datatables.net-searchpanes": "^2.2.0",
"datatables.net-searchpanes-bs5": "^2.2.0",
When I add this line to the datatables -> src -> styles it gives the error below "{$config.path.node_modules}/datatables.net-searchpanes-bs5/css/searchPanes.bootstrap5.min.css",PS F:\keen-theme\keen_html_v3.0.5_demo1\tools> gulp --prod --demo1
Using gulp config file: "../../gulp.config.js"
[18:28:35] Using gulpfile F:\keen-theme\keen_html_v3.0.5_demo1\tools\gulpfile.js
[18:28:35] Starting 'default'...
[18:28:35] Starting 'cleanTask'...
[18:28:35] Finished 'cleanTask' after 112 ms
[18:28:35] Starting 'buildBundleTask'...
[18:28:35] Finished 'buildBundleTask' after 56 ms
[18:28:35] Finished 'default' after 171 ms
Error in plugin "sass"
Message:
node_modules\datatables.net-searchpanes-bs5\css\datatables.bundle.css
Error: Missing argument $color.
┌──> node_modules\datatables.net-searchpanes-bs5\css\datatables.bundle.css
453│ div.dtsp-topRow{display:flex;flex-direction:row;flex-wrap:nowrap;border:2px solid rgba(0, 0, 0, 0);border-radius:3px;justify-content:space-around;align-content:flex-start;align-items:flex-start;min-height:37px}div.dtsp-topRow input.dtsp-search{text-overflow:ellipsis;min-width:50px;flex-basis:90px;max-width:none}div.dtsp-topRow input.dtsp-search::placeholder{color:inherit}div.dtsp-topRow div.dtsp-subRow1{display:flex;flex-direction:row;flex-wrap:nowrap;flex:1 1 auto}div.dtsp-topRow div.dtsp-subRow1 div.dtsp-searchCont{position:relative;width:100%}div.dtsp-topRow div.dtsp-subRow1 div.dtsp-searchCont input.dtsp-disabledButton{padding-top:10px;padding-bottom:10px;background-color:transparent}div.dtsp-topRow div.dtsp-subRow1 input{padding-right:2em;width:100% !important;box-sizing:border-box;font-size:1em}div.dtsp-topRow div.dtsp-subRow1 button.dtsp-searchIcon{position:absolute;top:0;right:0;bottom:0}div.dtsp-topRow div.dtsp-subRow1 button.dtsp-searchIcon span{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABbmlDQ1BpY2MAACiRdZE7SwNBFIU/EyWikRRaiFhsoWKhEBREO42FTZAQFYza7G5eQhKX3QQJtoKNhWAh2vgq/AfaCrYKgqAIIhb+Al+NhPVOEkiQZJbZ+3FmzmXmDHjCGTPrtAYhm8vb0bmQthxb0Xzv+PHRxRSabjrWTCQSpun4eaRF1YdR1av5voajM55wTGhpF54wLTsvPC0c3sxbineFe8y0Hhc+ER6x5YDCt0o3KvymOFXhL8X2YnQWPKqnlqpjo47NtJ0VHhYeyGYKZvU86ib+RG5pQWqfzH4coswRQsOgwDoZ8oxKzUlmjX3Bsm+eDfGY8rcoYosjRVq8I6IWpGtCalL0hHwZiir3/3k6yfGxSnd/CNpeXfdzEHz7UNpz3d9T1y2dgfcFrnM1/4bkNPkt+l5NGziGwDZc3tQ04wCudqD32dJtvSx5ZXqSSfi4gK4YdN9Dx2olq+o650+wuCVPdAeHRzAk+wNrfw8JaBFXEnV+AAAACXBIWXMAAA9hAAAPYQGoP6dpAAABMUlEQVQoU6XRr0vDQRjH8akoM4iIjqGoOIZ5oIjB5XWxajaYDGLSIhhNYjcPRDSJwbQNw+L+BNGgYYo/5pT5/shz8vDlBgMPXux7z3N3z+25VOofYyCyd4ZYCavI4gXPsRp9LqiDdrEMH+8wv8Vh8gBfWclFPOEUN3hAHjlMoRa7wTzBS5xgKLFglPkZLjDic6HyDsEMNvGR2Nxifoci3tEI+X770JU0XmPXIlax+LTPh83fFox1X6kxyzdjm9UcdXi9S+Vti6svfyNULhNR9TVsYNhW6Ff9KKCNR7/Zv6eeaQ+6+qcdpu9BqGlp1HFgu
If I try to add css to the page from CDN <link href="https://cdn.datatables.net/v/bs5/sb-1.6.0/sp-2.2.0/datatables.min.css" rel="stylesheet" type="text/css" />
Then it's better but still missing icons etc.
search panes
search builder
Hi,
The issue seems to be related to the latest Datetables plugin version that Keen 3.x uses. Please note that since Keen 1.x release, Datatables released lots of breaking changes so you will need to refer to the latest version of Datatable docs.
In the meantime, I will assign this case to our dev and he will get back to you with some more info as soo as possible.
Regards.
Hey Sean,
I checked Keen 1.4.7 docs and Keen 3.x docs as well. It looks like these two plugins were missing in the plugin list.
All in all, datatables version is correct in the 3.x. I wanted to add these two major and important official plugins to the source list which are not added by default. But styles are missing here. See the list of plugins here: https://datatables.net/download/compatibility
Hi,
Sorry for the delay. Try using earlier versions that might have better compatibility with Keen 3.x. Here's how you can adjust your package.json to specify earlier versions:
"datatables.net-searchbuilder": "^1.5.1", // Try reducing the version
"datatables.net-searchpanes": "^2.1.1", // Try reducing the version
"datatables.net-searchpanes-bs5": "^2.1.1",// Try reducing the versionAfter updating your package.json, run the following command to install the specified versions:
npm install
