Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PR for issue 28 #33

Merged
merged 30 commits into from
May 3, 2023
Merged

PR for issue 28 #33

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
6f92ac7
Added extra table classes to support responsive tables. Fixes #28.
mpibpc-mroose Apr 12, 2023
a7e676a
Added extra table classes to support responsive tables. Fixes #28.
mpibpc-mroose Apr 12, 2023
4825cab
Added extra table classes to support responsive tables. Fixes #28.
mpibpc-mroose Apr 12, 2023
e67c49e
Added extra table classes to support responsive tables. Fixes #28.
mpibpc-mroose Apr 12, 2023
42ae163
Added extra table classes to support responsive tables. Fixes #28.
mpibpc-mroose Apr 12, 2023
a6ff3ab
Added extra table classes to support responsive tables. Fixes #28.
mpibpc-mroose Apr 12, 2023
9fdf2a8
Implemented extra classes for support of responsive tables in Bootstr…
mpibpc-mroose Apr 13, 2023
cd52c41
remove whitespace
mpibpc-mroose Apr 19, 2023
927374c
Remove blank line
mpibpc-mroose Apr 19, 2023
ab9feb8
Remove blank line
mpibpc-mroose Apr 19, 2023
48684c2
Removed white space.
mpibpc-mroose Apr 19, 2023
6eb9cb2
Bumped version to 2.2.0 and documented changes.
mpibpc-mroose Apr 19, 2023
db051e4
Added responsive versions of the tables to the test project.
mpibpc-mroose Apr 19, 2023
3d324e7
Changed the layout of the table choose buttons in the test project.
mpibpc-mroose Apr 19, 2023
0c531d1
Update django_tables2_column_shifter/tests/test_base.py
mpibpc-mroose Apr 28, 2023
c5d0a36
Update django_tables2_column_shifter/tests/test_base.py
mpibpc-mroose Apr 28, 2023
0aeb702
Update django_tables2_column_shifter/tests/test_base.py
mpibpc-mroose Apr 28, 2023
fd34282
Update django_tables2_column_shifter/tables.py
mpibpc-mroose Apr 28, 2023
d1fd149
Update django_tables2_column_shifter/tables.py
mpibpc-mroose Apr 28, 2023
83517ad
Update django_tables2_column_shifter/tables.py
mpibpc-mroose Apr 28, 2023
e4273c1
Update django_tables2_column_shifter/tables.py
mpibpc-mroose Apr 28, 2023
a8ca391
Solved linting issue.
mpibpc-mroose Apr 28, 2023
79ad1a1
Bumped version.
mpibpc-mroose Apr 28, 2023
1451786
Fixed whitespace.
mpibpc-mroose Apr 28, 2023
783bb87
Added description about responsive table usage.
mpibpc-mroose Apr 28, 2023
66245b7
Merge branch 'master' of https://github.com/mpibpc-mroose/django-tabl…
mpibpc-mroose Apr 28, 2023
1d3775a
Solved linting issues.
mpibpc-mroose Apr 28, 2023
f5e0397
Re-defined test cases.
mpibpc-mroose Apr 28, 2023
e7175c5
Changed import of dt_version. Updated test cases to support major, mi…
mpibpc-mroose May 2, 2023
adb07a3
Moved import of dt_version.
mpibpc-mroose May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions CHANGELOG.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
CHANGELOG
===========

v. 2.2.0
--------

* Add new classes:
* ``ColumnShiftTableBootstrap4Responsive`` - only for django-tables2 >= 2.5.0
* ``ColumnShiftTableBootstrap5Responsive`` - only for django-tables2 >= 2.5.3

Classes able to use responsive tables with Bootstrap v4 and v5
Author: @mpibpc-mroose

v. 2.1.1
--------

Expand Down
11 changes: 9 additions & 2 deletions README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,10 @@ Using JQuery, Bootstrap3 or Bootstrap4 or Bootstrap5 and Django >=1.9.

* for bootstrap2 - ColumnShiftTableBootstrap2,
* for bootstrap3 - ColumnShiftTableBootstrap3,
* for bootstrap4 - ColumnShiftTableBootstrap4,
* for bootstrap5 - ColumnShiftTableBootstrap5,
* for bootstrap4 - ColumnShiftTableBootstrap4
* for bootstrap4 in responsive mode - ColumnShiftTableBootstrap4Responsive (only for django-tables2 >= 2.5)
* for bootstrap5 - ColumnShiftTableBootstrap5
* for bootstrap5 in responsive mode - ColumnShiftTableBootstrap5Responsive (only for django-tables2 >= 2.5.3)

**Tested by tox with:**

Expand Down Expand Up @@ -218,11 +220,16 @@ Bootstrap4 :
If you use Bootstrap v4 in your project then table class has to inherit from `ColumnShiftTableBootstrap4`
imported from `django_tables2_column_shifter.tables`.

Alternatively if you want to use `table-responsive` your table class has to inherit from
djk2 marked this conversation as resolved.
Show resolved Hide resolved
ColumnShiftTableBootstrap4Responsive (only for django-tables2 >= 2.5).

Bootstrap5:
--------------------------------------
If you use Bootstrap v5 in your project then table class has to inherit from `ColumnShiftTableBootstrap5`
imported from `django_tables2_column_shifter.tables`.

Alternatively if you want to use `table-responsive` your table class has to inherit from
djk2 marked this conversation as resolved.
Show resolved Hide resolved
ColumnShiftTableBootstrap5Responsive (only for django-tables2 >= 2.5.3).


Warnings:
Expand Down
2 changes: 1 addition & 1 deletion django_tables2_column_shifter/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
VERSION = (2, 1, 1)
VERSION = (2, 2, 0)
__version__ = ".".join(str(i) for i in VERSION)
41 changes: 40 additions & 1 deletion django_tables2_column_shifter/tables.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import django_tables2 as tables

djk2 marked this conversation as resolved.
Show resolved Hide resolved
dt_version = tuple(map(int, tables.__version__.split(".")[:3]))

class ColumnShiftTable(tables.Table):

class ColumnShiftTable(tables.Table):
# If button for shifting columns is visible
shift_table_column = True

Expand Down Expand Up @@ -89,9 +90,47 @@ class ColumnShiftTableBootstrap4(ColumnShiftTable):
shifter_template = "django_tables2_column_shifter/bootstrap4.html"


class ColumnShiftTableBootstrap4Responsive(ColumnShiftTable):
"""
Table class compatible with Bootstrap 4 and using "table-responsive" css class.
"""
shifter_template = "django_tables2_column_shifter/bootstrap4-responsive.html"
mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved

def __init__(self, *args, **kwargs):
if dt_version < (2, 5):
raise AssertionError(
"ColumnShiftTableBootstrap4Responsive require django-tables2 >= 2.5 "
"your current version is {}".format(tables.__version__)
)
super(ColumnShiftTableBootstrap4Responsive, self).__init__(*args, **kwargs)


class ColumnShiftTableBootstrap5(ColumnShiftTable):
"""
Table class compatible with bootstrap 5
"""
dropdown_button_css = "btn btn-light btn-sm"
shifter_template = "django_tables2_column_shifter/bootstrap5.html"

mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved
def __init__(self, *args, **kwargs):
if dt_version < (2, 5):
raise AssertionError(
"ColumnShiftTableBootstrap5 require django-tables2 >= 2.5 "
"your current version is {}".format(tables.__version__)
)
super(ColumnShiftTableBootstrap5, self).__init__(*args, **kwargs)


class ColumnShiftTableBootstrap5Responsive(ColumnShiftTableBootstrap5):
"""
Table class compatible with Bootstrap 5 and using "table-responsive" css class.
"""
shifter_template = "django_tables2_column_shifter/bootstrap5-responsive.html"
mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved

def __init__(self, *args, **kwargs):
if dt_version < (2, 5, 3):
raise AssertionError(
"ColumnShiftTableBootstrap5Responsive require django-tables2 >= 2.5.3 "
"your current version is {}".format(tables.__version__)
)
super(ColumnShiftTableBootstrap5Responsive, self).__init__(*args, **kwargs)
80 changes: 80 additions & 0 deletions ...umn_shifter/templates/django_tables2_column_shifter/_partials/bootstrap4_table_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
{% load trans from i18n %}
{% load static %}

mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved

mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved

mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved

mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved

<div class="btn-group">
<button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
src="{% static "django_tables2_column_shifter/img/cols.png" %}"
alt="Columns"
style="
width:20px;
height:16px;
margin-right:5px;
opacity:0.7;"
/>
{% trans "Visible columns" %}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="min-width:350px; padding:5px; cursor:pointer;">
{% for column in table.columns %}
{% if column.attrs.td.class not in table.get_column_excluded %}
{% if column.attrs.td.class in table.get_column_default_show %}
<li class="btn-shift-column"
data-td-class="{{ column.attrs.td.class }}"
data-state="on"
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
data-table-class-container="{{ table.uniq_table_class_name }}">
<img
src="{% static "django_tables2_column_shifter/img/check.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
class="ico check"
/>
<img
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
class="ico uncheck"
/>
{{ column.header }}
</li>
{% else %}
<li class="btn-shift-column"
data-td-class="{{ column.attrs.td.class }}"
data-state="off"
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
data-table-class-container="{{ table.uniq_table_class_name }}">
<img
src="{% static "django_tables2_column_shifter/img/check.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
class="ico check"
/>
<img
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
class="ico uncheck"
/>
{{ column.header }}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div> {# End btn-group#}

{# Loader default is show #}
<div class="loader" style="text-align:center;" >
<img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
{% trans "Table content is loading..."%}
</div> {# End loader #}

79 changes: 79 additions & 0 deletions ...umn_shifter/templates/django_tables2_column_shifter/_partials/bootstrap5_table_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
{% load trans from i18n %}
{% load static %}

<div class="btn-group">
<button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
id="btn_{{ table.uniq_table_class_name }}"
>
<img
src="{% static "django_tables2_column_shifter/img/cols.png" %}"
alt="Columns"
style="
width:20px;
height:16px;
margin-right:5px;
opacity:0.7;"
/>
{% trans "Visible columns" %}
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
style="min-width:350px; padding:5px; cursor:pointer;"
aria-labelledby="btn_{{ table.uniq_table_class_name }}"
>
{% for column in table.columns %}
{% if column.attrs.td.class not in table.get_column_excluded %}
{% if column.attrs.td.class in table.get_column_default_show %}
<li class="btn-shift-column"
data-td-class="{{ column.attrs.td.class }}"
data-state="on"
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
data-table-class-container="{{ table.uniq_table_class_name }}">
<img
src="{% static "django_tables2_column_shifter/img/check.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
class="ico check"
/>
<img
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
class="ico uncheck"
/>
{{ column.header }}
</li>
{% else %}
<li class="btn-shift-column"
data-td-class="{{ column.attrs.td.class }}"
data-state="off"
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
data-table-class-container="{{ table.uniq_table_class_name }}">
<img
src="{% static "django_tables2_column_shifter/img/check.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
class="ico check"
/>
<img
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
class="ico uncheck"
/>
{{ column.header }}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div> {# End btn-group#}

{# Loader default is show #}
<div class="loader" style="text-align:center;" >
<img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
{% trans "Table content is loading..."%}
</div> {# End loader #}
17 changes: 17 additions & 0 deletions ...tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4-responsive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% extends "django_tables2/bootstrap4-responsive.html" %}

{% block table %}
{% if table.shift_table_column %}
<div id="{{ table.uniq_table_class_name }}" class="column-shifter-container">
{% include 'django_tables2_column_shifter/_partials/bootstrap4_table_block.html' %}

{# Wrapper default is hide #}
<div class="table-wrapper" style="display:none;">
{# Load default table content #}
mpibpc-mroose marked this conversation as resolved.
Show resolved Hide resolved
{{ block.super }}
</div> {# End table-wrapper #}
</div> {# End column-shifter-container #}
{% else %}
{{ block.super }}
{% endif %}
{% endblock table %}
84 changes: 3 additions & 81 deletions django_tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,17 @@
{% extends "django_tables2/bootstrap4.html" %}
{% load trans from i18n %}
{% load static %}

{% block table %}

{% if table.shift_table_column %}

<div id="{{ table.uniq_table_class_name }}" class="column-shifter-container">
{% include 'django_tables2_column_shifter/_partials/bootstrap4_table_block.html' %}

<div class="btn-group">
<button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
src="{% static "django_tables2_column_shifter/img/cols.png" %}"
alt="Columns"
style="
width:20px;
height:16px;
margin-right:5px;
opacity:0.7;"
/>
{% trans "Visible columns" %}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="min-width:350px; padding:5px; cursor:pointer;">
{% for column in table.columns %}
{% if column.attrs.td.class not in table.get_column_excluded %}
{% if column.attrs.td.class in table.get_column_default_show %}
<li class="btn-shift-column"
data-td-class="{{ column.attrs.td.class }}"
data-state="on"
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
data-table-class-container="{{ table.uniq_table_class_name }}">
<img
src="{% static "django_tables2_column_shifter/img/check.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
class="ico check"
/>
<img
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
class="ico uncheck"
/>
{{ column.header }}
</li>
{% else %}
<li class="btn-shift-column"
data-td-class="{{ column.attrs.td.class }}"
data-state="off"
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
data-table-class-container="{{ table.uniq_table_class_name }}">
<img
src="{% static "django_tables2_column_shifter/img/check.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
class="ico check"
/>
<img
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
alt="loader"
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
class="ico uncheck"
/>
{{ column.header }}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div> {# End btn-group#}

{# Loader default is show #}
<div class="loader" style="text-align:center;" >
<img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
{% trans "Table content is loading..."%}
</div> {# End loader #}

{# Wrapper degault is hide #}
{# Wrapper default is hide #}
<div class="table-wrapper" style="display:none;">
{# Load default table content #}
{{ block.super }}
</div> {# End table-wrapper #}

</div> {# End column-shifter-container #}
</div> {# End column-shifter-container #}
{% else %}
{{ block.super }}
{% endif %}

{% endblock table %}