diff --git a/build/js/AdminLTE.js b/build/js/AdminLTE.js index 052eefb90..cb004e543 100644 --- a/build/js/AdminLTE.js +++ b/build/js/AdminLTE.js @@ -3,6 +3,7 @@ import CardWidget from './CardWidget' import ControlSidebar from './ControlSidebar' import DirectChat from './DirectChat' import Dropdown from './Dropdown' +import ExpandableTable from './ExpandableTable' import Layout from './Layout' import PushMenu from './PushMenu' import Toasts from './Toasts' @@ -15,6 +16,7 @@ export { ControlSidebar, DirectChat, Dropdown, + ExpandableTable, Layout, PushMenu, Toasts, diff --git a/build/js/ExpandableTable.js b/build/js/ExpandableTable.js new file mode 100644 index 000000000..82029b0c1 --- /dev/null +++ b/build/js/ExpandableTable.js @@ -0,0 +1,126 @@ +/** + * -------------------------------------------- + * AdminLTE ExpandableTable.js + * License MIT + * -------------------------------------------- + */ + +import $ from 'jquery' + +/** + * Constants + * ==================================================== + */ + +const NAME = 'ExpandableTable' +const DATA_KEY = 'lte.expandableTable' +const EVENT_KEY = `.${DATA_KEY}` +const JQUERY_NO_CONFLICT = $.fn[NAME] + +const Event = { + EXPANDED: `expanded${EVENT_KEY}`, + COLLAPSED: `collapsed${EVENT_KEY}` +} + +const ClassName = { + HEADER: 'expandable-header' +} + +const Selector = { + HEADER: `.${ClassName.HEADER}`, + DATA_SELECTOR: 'data-expandable-table', + EXPANDED: 'expanded', + COLLAPSED: 'collapsed' +} + +/** + * Class Definition + * ==================================================== + */ +class ExpandableTable { + constructor(element, config) { + this._config = config + this._element = element + } + + // Public + + init() { + $(Selector.HEADER).each((_, $header) => { + // Next Child to the header will have the same column span as header + $($header).next().children().first().attr('colSpan', $($header).children().length) + + // Setting up table design for the first time + const $type = $($header).next().attr(Selector.DATA_SELECTOR) + const $body = $($header).next().children().first().children() + if ($type === Selector.EXPANDED) { + $body.show() + } else if ($type === Selector.COLLAPSED) { + $body.hide() + $body.parent().parent().addClass('d-none') + } + }) + } + + toggleRow() { + const $element = this._element + const time = 500 + const $type = $element.next().attr(Selector.DATA_SELECTOR) + const $body = $element.next().children().first().children() + $body.stop() + if ($type === Selector.EXPANDED) { + $body.slideUp(time, () => { + $element.next().addClass('d-none') + }) + $element.next().attr(Selector.DATA_SELECTOR, Selector.COLLAPSED) + $element.trigger($.Event(Event.COLLAPSED)) + } else if ($type === Selector.COLLAPSED) { + $element.next().removeClass('d-none') + $body.slideDown(time) + $element.next().attr(Selector.DATA_SELECTOR, Selector.EXPANDED) + $element.trigger($.Event(Event.EXPANDED)) + } + } + + // Static + + static _jQueryInterface(config) { + return this.each(function () { + let data = $(this).data(DATA_KEY) + if (!data) { + data = new ExpandableTable($(this)) + $(this).data(DATA_KEY, data) + } + + if (config === 'init' || config === 'toggleRow') { + data[config]() + } + }) + } +} + +/** + * Data API + * ==================================================== + */ +$(ClassName.TABLE).ready(function () { + ExpandableTable._jQueryInterface.call($(this), 'init') +}) + +$(document).on('click', Selector.HEADER, function () { + ExpandableTable._jQueryInterface.call($(this), 'toggleRow') +}) + +/** + * jQuery API + * ==================================================== + */ + +$.fn[NAME] = ExpandableTable._jQueryInterface +$.fn[NAME].Constructor = ExpandableTable +$.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return ExpandableTable._jQueryInterface +} + +export default ExpandableTable diff --git a/build/scss/_table.scss b/build/scss/_table.scss index 0b198e1ec..65ce95c72 100644 --- a/build/scss/_table.scss +++ b/build/scss/_table.scss @@ -70,3 +70,16 @@ } } } + +// Expandable Table +.expandable-body { + td { + padding: 0; + width: 100%; + + > div, + > p { + padding: $table-cell-padding; + } + } +} diff --git a/pages/tables/simple.html b/pages/tables/simple.html index 01f55a3d1..8718c2dbb 100644 --- a/pages/tables/simple.html +++ b/pages/tables/simple.html @@ -1157,6 +1157,146 @@ +
+
+
+
+

Expandable Table

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#UserDateStatusReason
183John Doe11-7-2014ApprovedBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
219Alexander Pierce11-7-2014PendingBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
657Alexander Pierce11-7-2014ApprovedBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
175Mike Doe11-7-2014DeniedBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
134Jim Doe11-7-2014ApprovedBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
494Victoria Doe11-7-2014PendingBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
832Michael Doe11-7-2014ApprovedBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
982Rocky Doe11-7-2014DeniedBacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
+
+ +
+ +
+
+ diff --git a/pages/widgets.html b/pages/widgets.html index 47938409c..780ad6cff 100644 --- a/pages/widgets.html +++ b/pages/widgets.html @@ -2152,7 +2152,7 @@