All Projects → djk2 → django-tables2-column-shifter

djk2 / django-tables2-column-shifter

Licence: BSD-3-Clause license
Simple extension for django-tables2 can dynamically show or hide columns. Using JQuery, Bootstrap 3, Bootstrap 4, Bootstrap 5 and Django >=1.9

Programming Languages

javascript
184084 projects - #8 most used programming language
python
139335 projects - #7 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to django-tables2-column-shifter

Coreui Free Bootstrap Admin Template
CoreUI is free bootstrap admin template
Stars: ✭ 11,038 (+64829.41%)
Mutual labels:  bootstrap4, bootstrap5
Startbootstrap Freelancer
Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 2,304 (+13452.94%)
Mutual labels:  bootstrap4, bootstrap5
Startbootstrap Agency
Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,810 (+10547.06%)
Mutual labels:  bootstrap4, bootstrap5
Django Jinja Knockout
Django datatables and widgets, both AJAX and traditional. Display-only ModelForms. ModelForms / inline formsets with AJAX submit and validation. Works with Django templates.
Stars: ✭ 116 (+582.35%)
Mutual labels:  bootstrap4, bootstrap3
loopple
Drag & drop dashboard builder
Stars: ✭ 180 (+958.82%)
Mutual labels:  bootstrap4, bootstrap5
Startbootstrap Clean Blog
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,604 (+9335.29%)
Mutual labels:  bootstrap4, bootstrap5
Amexio.github.io
Amexio is a rich set of Angular 7 (170+) components powered by HTML5 & CSS3 for Responsive Design and with 80+ Material Design Themes, UI Components, Charts, Gauges, Data Point Widgets, Dashboards. Amexio is completely Open Sourced and Free. It's based on Apache 2 License. You can use it in your production grade work today at no cost or no obligation.
Stars: ✭ 163 (+858.82%)
Mutual labels:  bootstrap4, bootstrap3
Bootstrap Colorpicker
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Stars: ✭ 1,351 (+7847.06%)
Mutual labels:  bootstrap4, bootstrap3
bootstrap4-glyphicons
How use Glyphicons with Bootstrap 4 (without getting mad)
Stars: ✭ 40 (+135.29%)
Mutual labels:  bootstrap4, bootstrap3
Startbootstrap Sb Admin
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 2,861 (+16729.41%)
Mutual labels:  bootstrap4, bootstrap5
Startbootstrap Resume
Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,642 (+9558.82%)
Mutual labels:  bootstrap4, bootstrap5
hugo-dynamic-tabs
A Hugo theme component that allows you to add dynamic tabs in your markdown files.
Stars: ✭ 36 (+111.76%)
Mutual labels:  bootstrap4, bootstrap5
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (+558.82%)
Mutual labels:  bootstrap4, bootstrap3
Cakephp3 Bootstrap Helpers
CakePHP 3.x Helpers for Bootstrap 3 and 4.
Stars: ✭ 134 (+688.24%)
Mutual labels:  bootstrap4, bootstrap3
Aurelia Slickgrid
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with a few Styling Themes
Stars: ✭ 100 (+488.24%)
Mutual labels:  bootstrap4, bootstrap3
Startbootstrap Simple Sidebar
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,833 (+10682.35%)
Mutual labels:  bootstrap4, bootstrap5
Vvvebjs
Drag and drop website builder javascript library.
Stars: ✭ 4,609 (+27011.76%)
Mutual labels:  bootstrap4, bootstrap5
Developer Portfolio
Single page developer portfolio template.
Stars: ✭ 23 (+35.29%)
Mutual labels:  bootstrap4, bootstrap3
Django Bootstrap Modal Forms
A Django plugin for creating AJAX driven forms in Bootstrap modal.
Stars: ✭ 244 (+1335.29%)
Mutual labels:  bootstrap4, bootstrap3
startbootstrap-small-business
A Bootstrap HTML template for creating marketing websites for small businesses - created by Start Bootstrap
Stars: ✭ 186 (+994.12%)
Mutual labels:  bootstrap4, bootstrap5

django-tables2-column-shifter

Latest PyPI version GitHub Actions Requirements Status

About the app: Simple extension for django-tables2 to dynamically show or hide columns using jQuery. Application uses web storage to store information whih columns are visible or not. Using JQuery, Bootstrap3 or Bootstrap4 or Bootstrap5 and Django >=1.9.

Warning : - Since version 2.0 my extension works by default with bootstrap4.

I highly recommend to inherit explicite from tables class indicate on bootstrap version. I.e if you use in your project bootstrap in version 5. Your Tables classes should inherit from: django_tables2_column_shifter.tables.ColumnShiftTableBootstrap5.

Now you should inherit from:

  • for bootstrap2 - ColumnShiftTableBootstrap2,
  • for bootstrap3 - ColumnShiftTableBootstrap3,
  • for bootstrap4 - ColumnShiftTableBootstrap4,
  • for bootstrap5 - ColumnShiftTableBootstrap5,

Tested by tox with:

  • Python :3.6, 3.8
  • Django : 1.9, 1.10, 1.11, 2.0, 2.1, 3.0, 3.1, 3.2, master
  • django-tables2 : 1.5, 1.6, ..., 1.21, 2.0, 2.1, 2.2, 2.3, master

Supported:

  • Django >= 1.9
  • django-tables2 >= 1.5.0 (earlier version probably will be work but wasn't tested)
  • bootstrap2 / bootstrap3 / bootstrap4 / bootstrap4.1.3 / bootstrap5 beta3
  • JQuery

Supported locale:

  • EN - (English)
  • PL - (Polish)
  • EL - (Greek / Hellenic Republic)
  • PT-BR - (Portuguese - Brazilian)

More information about django-tables in here: https://django-tables2.readthedocs.io/

Screens:

screen 1

screen 2

How to Install:

  1. Install django-tables2-column-shifter using:

        pip install django-tables2-column-shifter
    
    or
    
        pip install git+https://github.com/djk2/django-tables2-column-shifter
    
    or
    
        pip install django-tables2-column-shifter.zip
    
    or
    
        pip install django-tables2-column-shifter.tar.gz
    
  2. Add django_tables2_column_shifter to your INSTALLED_APPS setting (after django_tables2) like this

    INSTALLED_APPS = [
        ...,
        'django_tables2',
        'django_tables2_column_shifter',
        ...,
    ]
    
  3. Add path to js script: django_tables2_column_shifter.min.js in your base django template. Script must be add after jquery.js and bootstrap.js and before </body> tag. Draw attention to fact that beginning from version 4 of bootstrap, the Popper.js is required to proper work of some of JS bootstrap scripts. More about dependencies here: https://getbootstrap.com/docs/4.0/getting-started/javascript/#dependencies

base.html:

{% load static %}

<body>
    ...
    ...
    <script src="{% static "jquery.min.js" %}"></script> {# require #}
    {# Popper is a dependency for bootstrap >= 4.0 #}
    <script src="{% static "bootstrap/js/popper.min.js" %}"></script>
    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>

    <script
        type="text/javascript"
        src="{% static "django_tables2_column_shifter/js/django_tables2_column_shifter.min.js" %}">
    </script>
</body>

Usage:

To use app, you must inherit your table class from django_tables2_column_shifter.tables.ColumnShiftTable

models.py - create ordinary model:

from django.db import models

class MyModel(models.Model):
    first_name = models.CharField("First name", max_length=50)
    last_name = models.CharField("Last name", max_length=50)

tables.py - change inherit to one of: ColumnShiftTableBootstrap2, ColumnShiftTableBootstrap3, ColumnShiftTableBootstrap4, ColumnShiftTableBootstrap5 (depends on which bootstrap version of bootstrap you are using):

from django_tables2_column_shifter.tables import (
    ColumnShiftTableBootstrap2, # If you use bootstrap2
    ColumnShiftTableBootstrap3, # If you use bootstrap3
    ColumnShiftTableBootstrap4, # If you use bootstrap4
    ColumnShiftTableBootstrap5, # If you use bootstrap5
)
from app.models import MyModel

# By default you probably inherit from django_table2.Table
# Change inherit to ColumnShiftTableBootstrap4
# if you use bootstrap4
class MyModelTable(ColumnShiftTableBootstrap4):
    class Meta:
        model = MyModel

# or if you use bootstrap5
class MyModelTable(ColumnShiftTableBootstrap5):
    class Meta:
        model = MyModel

views.py - In your view, nothing changes:

from .tables import MyModelTable
from .models import MyModel

def simple_list(request):
    queryset = MyModel.objects.all()
    table = MyModelTable(queryset)
    return render(request, 'template.html', {'table': table})

template.html - use default render_table tag to display table object (using bootstrap3 / bootstrap4 / bootstrap5):

{% extends "base.html" %}
{% load django_tables2 %}
{% render_table table %}

JS API:

To retrieve the invisible columns you can use the $.django_tables2_column_shifter_hidden() js API. You can either pass the 0-based index of the table in the page (i.e use $.django_tables2_column_shifter_hidden(1) to get the hidden columns for the 2nd table in the page) or just use it without parameters to retrieve the hidden columns for the first table. This API returns an array with the invisible column names.

These columns can then be used when you want to export only the visible columns, ie when the user clicks on the export button it would append an &excluded_columns=col1,col2 to the export button's href which would then be used by the django-tables2 TableExporter (http://django-tables2.readthedocs.io/en/latest/pages/export.html#excluding-columns) to exclude these cols, i.e something like

exporter = TableExport('csv', table, exclude_columns=self.request.GET.get('excluded_columns').split(',))

Bootstrap2 (support for old projects):

If you use Bootstrap v2 in your project then table class has to inherit from ColumnShiftTableBootstrap2 imported from django_tables2_column_shifter.tables.

Bootstrap3 (support for old projects):

If you use Bootstrap v3 in your project then table class has to inherit from ColumnShiftTableBootstrap3 imported from django_tables2_column_shifter.tables.

Bootstrap4 :

If you use Bootstrap v4 in your project then table class has to inherit from ColumnShiftTableBootstrap4 imported from django_tables2_column_shifter.tables.

Bootstrap5:

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

Warnings:

  • Warning : - If you use {% render_table %} tag with queryset (not table class instance), django-tables2-column-shifter will not be work. Queryset does not have template attribute:

    {% load django_tables2 %}
    {% render_table queryset %} {# not work #}
    
  • Warning : - If you use a different template than django_tables2_column_shifter/bootstrap*.html to render your table, probably django-tables2-column-shifter will not be work. Your custom template should inherit from django_tables2_column_shifter/bootstrap*.html

  • Warning : - Since version 2.0 the default template is not used for Table class. Moreover template django_tables2_column_shifter/table.html by default inherit from django_tables2_column_shifter/bootstrap4.html

Customizing:

  1. If you use more then one instance of the same Table class, you should use a different prefix for each instance:

    tab1 = MyModelTable(queryset, prefix='tab1')
    tab2 = MyModelTable(queryset, prefix='tab2')
    tab3 = MyModelTable(queryset, prefix='tab3')
    
  2. To disable shifter mechanism - set False to shift_table_column in your table class (default value is True):

    class MyModelTable(ColumnShiftTableBootstrap5):
       shift_table_column = False
       ...
    
  3. By default, all columns from sequence are visible, if you want limit visible columns, override method get_column_default_show(self) like that:

    class MyModelTable(ColumnShiftTableBootstrap5):
        def get_column_default_show(self):
            self.column_default_show = ['column1', 'column2']
            return super(MyModelTable, self).get_column_default_show()
    

Run demo:

  1. Download or clone project from https://github.com/djk2/django-tables2-column-shifter:

    git clone https://github.com/djk2/django-tables2-column-shifter.git
    
  2. Go to testproject directory:

    cd django-tables2-column-shifter/testproject
    
  3. Install requirements:

    pip install -r requirements.txt
    
  4. Run django developing server:

    python manage.py runserver
    

Links:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].