Tambah modul detable

.gitignore

@@ -4,3 +4,4 @@
 test*
 dist
 __pycache__
+build

CHANGES.txt

+0.2 2022-04-18
+--------------
+- Tambah detable
+
 0.1 2022-04-14
 --------------
 - Kali pertama

MANIFEST.in

+include *.txt
+recursive-include yaform *.pt
+recursive-include detable *.css *.pt

detable/__init__.py

+"""Detable."""
+import os
+from pkg_resources import resource_filename
+from . import detable  # API
+from deform.field import Field  # API
+from .detable import Button  # API
+from .detable import DeTable  # API
+from deform import ZPTRendererFactory  # API
+from deform import default_renderer  # API
+
+
+deform_templates = resource_filename('deform', 'templates')
+path = os.path.dirname(__file__)
+path = os.path.join(path, 'templates')
+search_path = (path, deform_templates)
+DeTable.set_zpt_renderer(search_path)

detable/detable.py

+"""Form."""
+# Standard Library
+import json
+import re
+
+from chameleon.utils import Markup
+from deform import compat
+from deform import field
+from . import widget
+
+
+class DeTable(field.Field):
+    """
+    Field representing an entire form.
+
+    Arguments:
+
+    schema
+        A :class:`colander.SchemaNode` object representing a
+        schema to be rendered.  Required.
+
+    action
+        The table action (inserted into the ``ajax_url`` attribute of
+        the datatable's scripts tag when rendered).  Required.
+
+    # method
+    #     The form method (inserted into the ``method`` attribute of
+    #     the form's form tag when rendered).  Default: ``POST``.
+
+    buttons
+        A sequence of strings or :class:`deform.form.Button`
+        objects representing submit buttons that will be placed at
+        the bottom of the form.  If any string is passed in the
+        sequence, it is converted to
+        :class:`deform.form.Button` objects.
+
+    tableid
+        The identifier for this table.  This value will be used as the
+        HTML ``id`` attribute of the rendered HTML table.  You should
+        pass a string value for ``tableid`` when more than one Detable
+        table is placed into a single page and both share the same action.
+        When one of the tables on the page is posted, your code will to
+        be able to decide which of those tables was posted based on the
+         differing values of ``__tableid__``.  By default,
+          ``tableid`` is ``detable``.
+
+    use_ajax
+       If this option is ``True``, the form will use AJAX (actually
+       AJAH); when any submit button is clicked, the DOM node related
+       to this form will be replaced with the result of the form post
+       caused by the submission.  The page will not be reloaded.  This
+       feature uses the ``jquery.form`` library ``ajaxForm`` feature
+       as per `http://jquery.malsup.com/form/
+       <http://jquery.malsup.com/form/>`_.  Default: ``False``.  If
+       this option is ``True``, the ``jquery.form.js`` library must be
+       loaded in the HTML page which embeds the form.  A copy of it
+       exists in the ``static`` directory of the ``deform`` package.
+
+    ajax_options
+       A *string* which must represent a JavaScript object
+       (dictionary) of extra AJAX options as per
+       `http://jquery.malsup.com/form/#tab3
+       <http://jquery.malsup.com/form/#tab3>`_.  For
+       example:
+
+       .. code-block:: python
+
+           '{"success": function (rText, sText, xhr, form) {alert(sText)};}'
+
+       Default options exist even if ``ajax_options`` is not provided.
+       By default, ``target`` points at the DOM node representing the
+       form and and ``replaceTarget`` is ``true``.
+
+       A success handler calls the ``deform.processCallbacks`` method
+       that will ajaxify the newly written form again.  If you pass
+       these values in ``ajax_options``, the defaults will be
+       overridden.  If you want to override the success handler, don't
+       forget to call ``deform.processCallbacks``, otherwise
+       subsequent form submissions won't be submitted via AJAX.
+
+       This option has no effect when ``use_ajax`` is False.
+
+       The default value of ``ajax_options`` is a string
+       representation of the empty object.
+
+    The :class:`deform.Form` constructor also accepts all the keyword
+    arguments accepted by the :class:`deform.Field` class.  These
+    keywords mean the same thing in the context of a Form as they do
+    in the context of a Field (a Form is just another kind of Field).
+    """
+
+    css_class = "deform"  # bw compat only; pass a widget to override
+
+    def __init__(
+            self,
+            schema,
+            action,
+            action_suffix='/grid/act',
+            buttons=(),
+            tableid="detable",
+            # use_ajax=False,
+            # ajax_options="{}",
+            # autocomplete=None,
+            # focus="on",
+            # cols = None,
+            **kw
+    ):
+        btn_close_js = "{window.location = '/'; return false;}"
+        btn_add_js = "{window.location = o%sUri+'/add';}" % tableid
+        btn_edit_js = "{window.location = o%sUri+'/'+m%sID+'/edit'}" % (
+                tableid, tableid)
+        btn_view_js = "{window.location = o%sUri+'/'+m%sID+'/view';}" % (
+                tableid, tableid)
+        btn_delete_js = "{window.location = o%sUri+'/'+m%sID+'/delete';}" % (
+                tableid, tableid)
+        btn_csv_js = "{window.location = o%sUri+'/csv/act';}" % tableid
+        btn_pdf_js = "{window.location = o%sUri+'/pdf/act';}" % tableid
+
+        field.Field.__init__(self, schema, **kw)
+        _buttons = []
+        for button in buttons:
+            if isinstance(button, compat.string_types):
+                button = Button(button)
+            _buttons.append(button)
+        buttons = _buttons
+        _buttons = []
+        _scripts = []
+        for button in buttons:
+            _buttons.append(
+                f"""<button
+                    id="{tableid}{button.name}"
+                    name="{button.name}"
+                    type="{button.type}"
+                    class="btn {button.css_class}">
+                        {button.title} </button>
+                    """)
+            _scripts.append(
+                    f'$("#{tableid + button.name}").click(function ()' +
+                    eval('btn_' + button.name + '_js') + ');')
+        self.buttons = "','".join(
+                _buttons).replace('\n', "").replace(';', ';\n')
+        self.tableid = tableid
+        self.scripts = ''.join(_scripts).replace(';', ";\n")
+        table_widget = getattr(schema, "widget", None)
+        if table_widget is None:
+            table_widget = widget.TableWidget()
+        self.widget = table_widget
+        columns = []
+        for f in schema:
+            d = {'data': f.name}
+            if hasattr(f, 'width'):
+                d["width"] = f.width
+            if hasattr(f, 'text_align'):
+                d["text-align"] = f.align
+            if hasattr(f, 'searchable'):
+                d["searchable"] = f.searchable
+            if hasattr(f, 'visible'):
+                d["visible"] = f.visible
+            if hasattr(f, 'orderable'):
+                d["orderable"] = f.orderable
+
+            columns.append(d)
+        self.columns = json.dumps(columns)
+        self.url = action
+        self.url_suffix = action_suffix
+
+
+class Button(object):
+    """
+    A class representing a form submit button.  A sequence of
+    :class:`deform.widget.Button` objects may be passed to the
+    constructor of a :class:`deform.form.Form` class when it is
+    created to represent the buttons renderered at the bottom of the
+    form.
+
+    Arguments:
+
+    name
+        The string or unicode value used as the ``name`` of the button
+        when rendered (the ``name`` attribute of the button or input
+        tag resulting from a form rendering).  Default: ``submit``.
+
+    title
+        The value used as the title of the button when rendered (shows
+        up in the button inner text).  Default: capitalization of
+        whatever is passed as ``name``.  E.g. if ``name`` is passed as
+        ``submit``, ``title`` will be ``Submit``.
+
+    type
+        The value used as the type of button. The HTML spec supports
+        ``submit``, ``reset`` and ``button``.  A special value of
+        ``link`` will create a regular HTML link that's styled to look
+        like a button.  Default: ``submit``.
+
+    value
+        The value used as the value of the button when rendered (the
+        ``value`` attribute of the button or input tag resulting from
+        a form rendering).  If the button ``type`` is ``link`` then
+        this setting is used as the URL for the link button.
+        Default: same as ``name`` passed.
+
+    icon
+        glyph icon name to include as part of button.  (Ex. If you
+        wanted to add the glyphicon-plus to this button then you'd pass
+        in a value of ``plus``)  Default: ``None`` (no icon is added)
+
+    disabled
+        Render the button as disabled if True.
+
+    css_class
+        The name of a CSS class to attach to the button. In the default
+        form rendering, this string will replace the default button type
+        (either ``btn-primary`` or ``btn-default``) on the the ``class``
+        attribute of the button. For example, if ``css_class`` was
+        ``btn-danger`` then the resulting default class becomes
+        ``btn btn-danger``. Default: ``None`` (use default class).
+
+    attributes
+        HTML5 attributes passed in as a dictionary. This is especially
+        useful for a Cancel button where you do not want the client to
+        validate the form inputs, for example
+        ``attributes={"formnovalidate": "formnovalidate"}``.
+    """
+
+    def __init__(
+            self,
+            name="view",
+            oid=None,
+            title=None,
+            type="button",  # noQA
+            css_class=None,
+            icon=None,
+            attributes=None,
+            disabled=None
+    ):
+        if attributes is None:
+            attributes = {}
+        if title is None:
+            title = name.capitalize()
+        name = re.sub(r"\s", "_", name)
+        if oid is None:
+            self.oid = f"detable_btn_{name}"
+        self.name = name
+        self.title = title
+        self.type = type  # noQA
+        self.disabled = disabled
+        self.css_class = css_class
+        self.icon = icon
+        self.attributes = attributes

detable/i18n.py

+"""I18n."""
+from translationstring import TranslationStringFactory
+
+
+_ = TranslationStringFactory("detable")

detable/static/css/demo_table.css

+/*
+ *  File:         demo_table.css
+ *  CVS:          $Id$
+ *  Description:  CSS descriptions for DataTables demo pages
+ *  Author:       Allan Jardine
+ *  Created:      Tue May 12 06:47:22 BST 2009
+ *  Modified:     $Date$ by $Author$
+ *  Language:     CSS
+ *  Project:      DataTables
+ *
+ *  Copyright 2009 Allan Jardine. All Rights Reserved.
+ *
+ * ***************************************************************************
+ * DESCRIPTION
+ *
+ * The styles given here are suitable for the demos that are used with the standard DataTables
+ * distribution (see www.datatables.net). You will most likely wish to modify these styles to
+ * meet the layout requirements of your site.
+ *
+ * Common issues:
+ *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
+ *     no conflict between the two pagination types. If you want to use full_numbers pagination
+ *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
+ *     modify that selector.
+ *   Note that the path used for Images is relative. All images are by default located in
+ *     ../images/ - relative to this CSS file.
+ */
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables features
+ */
+
+.dataTables_wrapper {
+	position: relative;
+	clear: both;
+	zoom: 1; /* Feeling sorry for IE */
+}
+
+.dataTables_processing {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 250px;
+	height: 30px;
+	margin-left: -125px;
+	margin-top: -15px;
+	padding: 14px 0 2px 0;
+	border: 1px solid #ddd;
+	text-align: center;
+	color: #999;
+	font-size: 14px;
+	background-color: white;
+}
+
+.dataTables_length {
+	width: 40%;
+	float: left;
+}
+
+.dataTables_filter {
+	width: 50%;
+	float: right;
+	text-align: right;
+}
+
+.dataTables_info {
+	width: 60%;
+	float: left;
+}
+
+.dataTables_paginate {
+	float: right;
+	text-align: right;
+}
+
+/* Pagination nested */
+.paginate_disabled_previous, .paginate_enabled_previous,
+.paginate_disabled_next, .paginate_enabled_next {
+	height: 19px;
+	float: left;
+	cursor: pointer;
+	*cursor: hand;
+	color: #111 !important;
+}
+.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
+.paginate_disabled_next:hover, .paginate_enabled_next:hover {
+	text-decoration: none !important;
+}
+.paginate_disabled_previous:active, .paginate_enabled_previous:active,
+.paginate_disabled_next:active, .paginate_enabled_next:active {
+	outline: none;
+}
+
+.paginate_disabled_previous,
+.paginate_disabled_next {
+	color: #666 !important;
+}
+.paginate_disabled_previous, .paginate_enabled_previous {
+	padding-left: 23px;
+}
+.paginate_disabled_next, .paginate_enabled_next {
+	padding-right: 23px;
+	margin-left: 10px;
+}
+
+.paginate_disabled_previous {
+	background: url('../images/back_disabled.png') no-repeat top left;
+}
+
+.paginate_enabled_previous {
+	background: url('../images/back_enabled.png') no-repeat top left;
+}
+.paginate_enabled_previous:hover {
+	background: url('../images/back_enabled_hover.png') no-repeat top left;
+}
+
+.paginate_disabled_next {
+	background: url('../images/forward_disabled.png') no-repeat top right;
+}
+
+.paginate_enabled_next {
+	background: url('../images/forward_enabled.png') no-repeat top right;
+}
+.paginate_enabled_next:hover {
+	background: url('../images/forward_enabled_hover.png') no-repeat top right;
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables display
+ */
+table.display {
+	margin: 0 auto;
+	clear: both;
+	width: 100%;
+	
+	/* Note Firefox 3.5 and before have a bug with border-collapse
+	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
+	 * border-spacing: 0; is one possible option. Conditional-css.com is
+	 * useful for this kind of thing
+	 *
+	 * Further note IE 6/7 has problems when calculating widths with border width.
+	 * It subtracts one px relative to the other browsers from the first column, and
+	 * adds one to the end...
+	 *
+	 * If you want that effect I'd suggest setting a border-top/left on th/td's and 
+	 * then filling in the gaps with other borders.
+	 */
+}
+
+table.display thead th {
+	padding: 3px 18px 3px 10px;
+	border-bottom: 1px solid black;
+	font-weight: bold;
+	cursor: pointer;
+	* cursor: hand;
+}
+
+table.display tfoot th {
+	padding: 3px 18px 3px 10px;
+	border-top: 1px solid black;
+	font-weight: bold;
+}
+
+table.display tr.heading2 td {
+	border-bottom: 1px solid #aaa;
+}
+
+table.display td {
+	padding: 3px 10px;
+}
+
+table.display td.center {
+	text-align: center;
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables sorting
+ */
+
+.sorting_asc {
+	background: url('../images/sort_asc.png') no-repeat center right;
+}
+
+.sorting_desc {
+	background: url('../images/sort_desc.png') no-repeat center right;
+}
+
+.sorting {
+	background: url('../images/sort_both.png') no-repeat center right;
+}
+
+.sorting_asc_disabled {
+	background: url('../images/sort_asc_disabled.png') no-repeat center right;
+}
+
+.sorting_desc_disabled {
+	background: url('../images/sort_desc_disabled.png') no-repeat center right;
+}
+ 
+table.display thead th:active,
+table.display thead td:active {
+	outline: none;
+}
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables row classes
+ */
+table.display tr.odd.gradeA {
+	background-color: #ddffdd;
+}
+
+table.display tr.even.gradeA {
+	background-color: #eeffee;
+}
+
+table.display tr.odd.gradeC {
+	background-color: #ddddff;
+}
+
+table.display tr.even.gradeC {
+	background-color: #eeeeff;
+}
+
+table.display tr.odd.gradeX {
+	background-color: #ffdddd;
+}
+
+table.display tr.even.gradeX {
+	background-color: #ffeeee;
+}
+
+table.display tr.odd.gradeU {
+	background-color: #ddd;
+}
+
+table.display tr.even.gradeU {
+	background-color: #eee;
+}
+
+
+tr.odd {
+	background-color: #E2E4FF;
+}
+
+tr.even {
+	background-color: white;
+}
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Misc
+ */
+.dataTables_scroll {
+	clear: both;
+}
+
+.dataTables_scrollBody {
+	*margin-top: -1px;
+	-webkit-overflow-scrolling: touch;
+}
+
+.top, .bottom {
+	padding: 15px;
+	background-color: #F5F5F5;
+	border: 1px solid #CCCCCC;
+}
+
+.top .dataTables_info {
+	float: none;
+}
+
+.clear {
+	clear: both;
+}
+
+.dataTables_empty {
+	text-align: center;
+}
+
+tfoot input {
+	margin: 0.5em 0;
+	width: 100%;
+	color: #444;
+}
+
+tfoot input.search_init {
+	color: #999;
+}
+
+td.group {
+	background-color: #d1cfd0;
+	border-bottom: 2px solid #A19B9E;
+	border-top: 2px solid #A19B9E;
+}
+
+td.details {
+	background-color: #d1cfd0;
+	border: 2px solid #A19B9E;
+}
+
+
+.example_alt_pagination div.dataTables_info {
+	width: 40%;
+}
+
+.paging_full_numbers {
+	width: 400px;
+	height: 22px;
+	line-height: 22px;
+}
+
+.paging_full_numbers a:active {
+	outline: none
+}
+
+.paging_full_numbers a:hover {
+	text-decoration: none;
+}
+
+.paging_full_numbers a.paginate_button,
+ 	.paging_full_numbers a.paginate_active {
+	border: 1px solid #aaa;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	padding: 2px 5px;
+	margin: 0 3px;
+	cursor: pointer;
+	*cursor: hand;
+	color: #333 !important;
+}
+
+.paging_full_numbers a.paginate_button {
+	background-color: #ddd;
+}
+
+.paging_full_numbers a.paginate_button:hover {
+	background-color: #ccc;
+	text-decoration: none !important;
+}
+
+.paging_full_numbers a.paginate_active {
+	background-color: #99B3FF;
+}
+
+table.display tr.even.row_selected td {
+	background-color: #B0BED9;
+}
+
+table.display tr.odd.row_selected td {
+	background-color: #9FAFD1;
+}
+
+
+/*
+ * Sorting classes for columns
+ */
+/* For the standard odd/even */
+tr.odd td.sorting_1 {
+	background-color: #D3D6FF;
+}
+
+tr.odd td.sorting_2 {
+	background-color: #DADCFF;
+}
+
+tr.odd td.sorting_3 {
+	background-color: #E0E2FF;
+}
+
+tr.even td.sorting_1 {
+	background-color: #EAEBFF;
+}
+
+tr.even td.sorting_2 {
+	background-color: #F2F3FF;
+}
+
+tr.even td.sorting_3 {
+	background-color: #F9F9FF;
+}
+
+
+/* For the Conditional-CSS grading rows */
+/*
+ 	Colour calculations (based off the main row colours)
+  Level 1:
+		dd > c4
+		ee > d5
+	Level 2:
+	  dd > d1
+	  ee > e2
+ */
+tr.odd.gradeA td.sorting_1 {
+	background-color: #c4ffc4;
+}
+
+tr.odd.gradeA td.sorting_2 {
+	background-color: #d1ffd1;
+}
+
+tr.odd.gradeA td.sorting_3 {
+	background-color: #d1ffd1;
+}
+
+tr.even.gradeA td.sorting_1 {
+	background-color: #d5ffd5;
+}
+
+tr.even.gradeA td.sorting_2 {
+	background-color: #e2ffe2;
+}
+
+tr.even.gradeA td.sorting_3 {
+	background-color: #e2ffe2;
+}
+
+tr.odd.gradeC td.sorting_1 {
+	background-color: #c4c4ff;
+}
+
+tr.odd.gradeC td.sorting_2 {
+	background-color: #d1d1ff;
+}
+
+tr.odd.gradeC td.sorting_3 {
+	background-color: #d1d1ff;
+}
+
+tr.even.gradeC td.sorting_1 {
+	background-color: #d5d5ff;
+}
+
+tr.even.gradeC td.sorting_2 {
+	background-color: #e2e2ff;
+}
+
+tr.even.gradeC td.sorting_3 {
+	background-color: #e2e2ff;
+}
+
+tr.odd.gradeX td.sorting_1 {
+	background-color: #ffc4c4;
+}
+
+tr.odd.gradeX td.sorting_2 {
+	background-color: #ffd1d1;
+}
+
+tr.odd.gradeX td.sorting_3 {
+	background-color: #ffd1d1;
+}
+
+tr.even.gradeX td.sorting_1 {
+	background-color: #ffd5d5;
+}
+
+tr.even.gradeX td.sorting_2 {
+	background-color: #ffe2e2;
+}
+
+tr.even.gradeX td.sorting_3 {
+	background-color: #ffe2e2;
+}
+
+tr.odd.gradeU td.sorting_1 {
+	background-color: #c4c4c4;
+}
+
+tr.odd.gradeU td.sorting_2 {
+	background-color: #d1d1d1;
+}
+
+tr.odd.gradeU td.sorting_3 {
+	background-color: #d1d1d1;
+}
+
+tr.even.gradeU td.sorting_1 {
+	background-color: #d5d5d5;
+}
+
+tr.even.gradeU td.sorting_2 {
+	background-color: #e2e2e2;
+}
+
+tr.even.gradeU td.sorting_3 {
+	background-color: #e2e2e2;
+}
+
+
+/*
+ * Row highlighting example
+ */
+.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
+	background-color: #ECFFB3;
+}
+
+.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
+	background-color: #E6FF99;
+}
+
+.ex_highlight_row #example tr.even:hover {
+	background-color: #ECFFB3;
+}
+
+.ex_highlight_row #example tr.even:hover td.sorting_1 {
+	background-color: #DDFF75;
+}
+
+.ex_highlight_row #example tr.even:hover td.sorting_2 {
+	background-color: #E7FF9E;
+}
+
+.ex_highlight_row #example tr.even:hover td.sorting_3 {
+	background-color: #E2FF89;
+}
+
+.ex_highlight_row #example tr.odd:hover {
+	background-color: #E6FF99;
+}
+
+.ex_highlight_row #example tr.odd:hover td.sorting_1 {
+	background-color: #D6FF5C;
+}
+
+.ex_highlight_row #example tr.odd:hover td.sorting_2 {
+	background-color: #E0FF84;
+}
+
+.ex_highlight_row #example tr.odd:hover td.sorting_3 {
+	background-color: #DBFF70;
+}
+
+
+/*
+ * KeyTable
+ */
+table.KeyTable td {
+	border: 3px solid transparent;
+}
+
+table.KeyTable td.focus {
+	border: 3px solid #3366FF;
+}
+
+table.display tr.gradeA {
+	background-color: #eeffee;
+}
+
+table.display tr.gradeC {
+	background-color: #ddddff;
+}
+
+table.display tr.gradeX {
+	background-color: #ffdddd;
+}
+
+table.display tr.gradeU {
+	background-color: #ddd;
+}
+
+div.box {
+	height: 100px;
+	padding: 10px;
+	overflow: auto;
+	border: 1px solid #8080FF;
+	background-color: #E5E5FF;
+}

detable/static/css/osipkd.css

+body {
+  font-family: "Open Sans", "Helvetica Neue",  Helvetica, Arial, sans-serif; 
+  --font-weight: 300;
+  --color: #ffffff;
+  --background: #bc2131;
+  font-size: 12px !important;
+  padding-top: 40px;
+}
+  
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+}
+legend {
+  font-size: 14px;
+}
+
+.bar {
+    height: 18px;
+    background: green;
+}
+
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+margin-bottom: 0;
+width: 100%;
+height: 26px;
+position: absolute;
+top: 0;
+left: 0;
+} 
+.twitter-typeahead .tt-hint {
+color: #a1a1a1;
+z-index: 1;
+padding: 3px 6px;
+border: 1px solid transparent;
+} 
+.form-control {
+  font-size: 12px;
+  padding: 3px 6px !important;
+  height: 26px;
+}
+.btn  {
+  font-size: 12px;
+  padding: 3px 6px;
+  height: 26px;
+}
+
+.input-group-addon{
+  padding: 3px 6px;
+  height: 26px;
+  font-size: 12px;
+  
+}
+
+.picker__select--month, .picker__select--year {
+    padding: 0.1em;
+    /*height: 3em;*/
+}
+
+.container {
+    --max-width: 1024px;
+}
+
+.container .info {
+    font-size: 18px;
+    padding: 14px;
+    color: #fff;
+}
+
+.container .btn-menu  {
+    text-align: left;
+    font-size: 16px;
+    padding: 14px 24px;
+    border-radius: 6px;
+    border: 0px none;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.container .btn-login  {
+    font-size: 18px;
+    padding: 10px 20px;
+    border-radius: 6px;
+    border: 0px none;
+    background: #BC2131;
+    background-image: linear-gradient(to bottom, #C6414E 0px, #BC2131 100%);
+    background-repeat: repeat-x;
+
+    margin-top:20px;
+}
+
+.container .btn-logout  {
+    margin-top:12px;
+}
+
+.container .btn-login:hover  {
+    background: #BC2131;
+}
+
+.container .btn-login  .label {
+    display: block;
+    font-size: 8px;
+}
+
+
+/* dataTables Customize */
+table.dataTable thead {
+    background-color: #EAEAEA;
+}
+
+table.dataTable tr.even.selected td {
+	background-color: #B0BED9;
+}
+table.dataTable tr.odd.selected td {
+	background-color: #9FAFD1;
+}
+table.dataTable tr.selected td {
+	background-color: #9FAFD1;
+}
+
+/*
+table.dataTable thead > tr > th{
+    padding: 2px;
+    line-height: 30px;
+}
+
+table.dataTable tbody > tr > td{
+    padding: 2px;
+    line-height: 20px;
+}
+
+
+table.dataTable tr.even td {
+	background-color: #FFFFFF;
+}
+table.dataTable tr.odd td {
+	background-color: #E2E4FF;
+}
+
+table.dataTable tr td {
+    vertical-align: middle;
+}
+table.dataTable tbody > tr > td.dataTables_empty {
+    line-height:inherit;
+}
+
+table.dataTable tbody td {
+  padding: 2px 2px;
+}
+
+table.dataTable th.right,
+table.dataTable td.right {
+  text-align: right;
+}
+
+table.dataTable th.center,
+table.dataTable td.center {
+  text-align: center;
+}
+
+div.tab-content {
+    padding-top: 10px;
+}
+*/
+.form-horizontal .form-group {
+    margin-bottom: 4px !important; 
+}
+
+.picker {
+  font-size: 12px;
+  text-align: left;
+  line-height: 1.2;
+  color: #000000;
+  position: absolute;
+  z-index: 10000;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
\ No newline at end of file

detable/templates/detable.pt

+<div tal:define="style style|field.widget.style;
+        css_class css_class|string:${field.widget.css_class or field.css_class or 'jarviswidget jarviswidget-color-blueLight'};
+        item_template item_template|field.widget.item_template;
+        title title|field.title;
+        errormsg errormsg|field.errormsg;
+        description description|field.description;
+        buttons buttons|field.buttons;
+        tableid tableid|field.tableid;
+        columns columns|field.columns;
+        btnscripts scripts|field.scripts;
+        url url|field.url;
+        url_suffix url_suffix|field.url_suffix;"
+         tal:attributes="style style;
+                class css_class;
+        attributes|field.widget.attributes|{};"
+
+         i18n:domain="detable">
+    <header role="heading" class="txt-color-grayDark">
+        <h2 tal:condition="title">
+            <i class="fa fa-fw fa-table"></i>${title}
+        </h2>
+        <div role="content">
+            <div class="widget-body">
+                <table id="${tableid}"
+                       class="table table-bordered table-hover table-condensed dataTable no-footer">
+                    <thead>
+                    <tr>
+                        <th tal:repeat="child field">${child.title}
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+
+            </div> <!-- widget-body -->
+        </div>
+    </header>
+    <script type="text/javascript">
+        deform.addCallback(
+                '${tableid}',
+                function (oid) {
+                    var m${tableid}ID;
+                    var o${tableid};
+                    var o${tableid}Uri = "${url}"
+                    var o${tableid}Url = o${tableid}Uri + "${url_suffix}";
+                    var tb_array = [
+                        '<div class="btn-group pull-left">',
+                        '${structure:buttons}',
+                        '	&nbsp;',
+                        '</div>',
+                    ]
+
+
+                    var language = {
+                        "search": "Cari: ",
+                        "paginate": {
+                            "first": '<span class="glyphicon glyphicon-step-backward"></span> ',
+                            "last": '<span class="glyphicon glyphicon glyphicon-step-forward"></span> ',
+                            "previous": '<span class="glyphicon glyphicon-backward"></span>  ',
+                            "next": '<span class="glyphicon glyphicon-forward"></span>  ',
+                        },
+                        "lengthMenu": " _MENU_ baris "
+                    };
+
+                    o${tableid} = $('#${tableid}').DataTable({
+                        dom: '<"row"<"col-md-8"<"toolbar">Bl><"col-md-4"fr>>tip',
+                        processing: true,
+                        serverSide: true,
+                        ajax: o${tableid}Url,
+                        stateSave: true,
+                        scrollCollapse: true,
+                        sort: true,
+                        info: false,
+                        filter: true,
+                        autoWidth: false,
+                        paginate: true,
+                        paginationType: "full_numbers",
+
+                        lengthMenu: [
+                            [10, 25, 50, 100],
+                            [10, 25, 50, 100]
+                        ],
+                        //columnDefs: columnDefs,
+                        columns: ${columns},
+                        "language": language,
+
+                    });
+
+                    var tb = tb_array.join(' ');
+                    $("div.toolbar").html(tb);
+                    $("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
+                    $('#${tableid} tbody').on('click', 'tr', function () {
+                        if ($(this).hasClass('selected')) {
+                            $(this).removeClass('selected');
+                        } else {
+                            var aData = o${tableid}.row(this).data();
+                            o${tableid}.$('tr.selected').removeClass('selected');
+                            $(this).addClass('selected');
+                            m${tableid}ID = aData.id;
+                            // console.log(mID);
+                            o${tableid}.$('tr.row_selected').removeClass('row_selected');
+                            $(this).addClass('row_selected');
+                        }
+                    });
+                        ${structure:btnscripts}
+                });
+    </script>
+</div>
\ No newline at end of file

detable/widget.py

+"""Widget."""
+# Standard Library
+import csv
+import json
+import random
+
+# Pyramid
+from colander import Invalid
+from colander import Mapping
+from colander import SchemaNode
+from colander import SchemaType
+from colander import Sequence
+from colander import String
+from colander import null
+from iso8601.iso8601 import ISO8601_REGEX
+from translationstring import TranslationString
+
+from deform.widget import MappingWidget
+from deform.compat import text_
+from .i18n import _
+
+
+_BLANK = text_("")
+
+
+class TableWidget(MappingWidget):
+    """
+    The top-level widget; represents an entire table.
+
+    **Attributes/Arguments**
+
+    template
+        The template name used to render the widget.  Default:
+        ``detable``.
+
+    """
+
+    template = "detable"
+    readonly_template = "readonly/detable"

setup.py

@@ -18,7 +18,11 @@ version = line.split()[0]
 
 requires = [
     'deform',
-    'PyYAML']
+    'PyYAML',
+    'sqlalchemy-datatables',
+    'opensipkd-tools @ '
+    'git+https://git.opensipkd.com/aa.gusti/opensipkd-tools.git',
+    ]
 
 
 setup(