datatablessubmenu v1.0.3
Table Submenu
this module helps you to add a submenu on a click on a table row.
Very useful when using datatbles for example.
install the module
yarn add datatablessubmenu
Basics
Read this before
A submenu is a div
element with as much as you like a
children
You must create a config object to let TableSubmenu class know how to build your submenus
- Note that all rows must have an id attribute
- You must have a class to hide elements (by default, hide class name is provided)
- submenu children are
a
elements whosehref
attributes are made like this :routePrefix + id + routeSufix routePrefix is what comes before your id in href routeSufix is what comes after (can be removed)
create a js file
document.addEventListener('DOMContentLoaded', () => {
// select all rows in your table
const rows = document.querySelectorAll('tr')
// loop on your rows
rows.forEach((row) => {
// create submenu for each row
const subMenu = new TableSubmenu(row, {
// config
parent: {
mainClass: "submenu-row",
classes: [
"hide"
],
idPrefix : "mysubmenu-"
},
children: {
'edit': {
routePrefix: "/url/prefix/",
routeSufix : "/sufix",
text: "First text" // for example "Edit"
},
'show': {
routePrefix: "/url/prefix2/",
routeSufix : "/sufix2",
text: "second text" // for example "Show details"
}
}
})
// Add click event listener on each row
row.addEventLister('click', (e) => {
// hide all opened submenus
subMenu.hideAll()
// show specific row submenu
subMenu.show(e)
})
}
})
Import Css
This module comes with a basic css you can import with
@import "~datatablessubmenu";
Use it inside a symfony project with Datatables Omines Bundle
Because of the jQuery included in twig templates to make datatables working, you'll have to include your submenus in your template too.
install
yarn add datatablessubmenu
Create an asset that will be available in public directory
First edit your webpack.config.js file and paste these lines :
.copyFiles({
from: './node_modules/datatablessubmenu',
to: 'modules/datatablessubmenu/[path][name].[ext]',
pattern: /\.(js)$/
})
Include TableSubmenu class in your template
<script src="{{ asset('build/modules/datatablessubmenu/DatatablesSubmenu.js') }}"></script>
Use it in your datatables configuration
in your twig template you should have your initDatatable function. Yout have to add subMenu in the drawCallback method like above :
$('#yourTableId').initDataTables({{ datatable_settings(datatable) }}, {
drawCallback: function(settings) {
// [... pre-existant code ... ]
const rows = document.querySelectorAll('tr')
rows.forEach((row) => {
const submenu = new TableSubmenu(row, {
parent: {
mainClass: "submenu-row",
classes: [
"hide"
],
idPrefix : "idprefixYouLike-"
},
children: {
'edit': {
routePrefix: "/url/action/",
routeSufix : "/sufix", // optional
text: "your first link text"
},
'show': {
routePrefix: "/url/action2/",
routeSufix : "/sufix", // optional
text: "Your second link text"
}
}
})
row.addEventListener('click', (e) => {
submenu.hideAll()
submenu.show(e)
})
})
Import Css
This module comes with a basic css you can import with
@import "~datatablessubmenu";