shymonk / Django Datatable
Licence: mit
django-datatable is a customizable table application of django based on jquery datatable.
Stars: ✭ 167
Programming Languages
python
139335 projects - #7 most used programming language
Labels
Projects that are alternatives of or similar to Django Datatable
Canvas Datagrid
Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
Stars: ✭ 798 (+377.84%)
Mutual labels: datatable
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (-29.94%)
Mutual labels: datatable
Vuejs Datatable
A Vue.js component for filterable and paginated tables.
Stars: ✭ 148 (-11.38%)
Mutual labels: datatable
Vue2 Datatable
The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Stars: ✭ 867 (+419.16%)
Mutual labels: datatable
Aurelia Slickgrid
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with a few Styling Themes
Stars: ✭ 100 (-40.12%)
Mutual labels: datatable
Vue Good Table
An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc
Stars: ✭ 1,824 (+992.22%)
Mutual labels: datatable
Datatable
A simple, modern and interactive datatable library for the web
Stars: ✭ 587 (+251.5%)
Mutual labels: datatable
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+1332.93%)
Mutual labels: datatable
Grid
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets and more 💥
Stars: ✭ 573 (+243.11%)
Mutual labels: datatable
Vue Data Tables
A simple, customizable and pageable table with SSR support, based on vue2 and element-ui
Stars: ✭ 976 (+484.43%)
Mutual labels: datatable
Svelte Simple Datatables
A Datatable component for Svelte
Stars: ✭ 56 (-66.47%)
Mutual labels: datatable
Tui.grid
🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
Stars: ✭ 1,859 (+1013.17%)
Mutual labels: datatable
Primeng
The Most Complete Angular UI Component Library
Stars: ✭ 7,180 (+4199.4%)
Mutual labels: datatable
Vue Table
data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
Stars: ✭ 1,833 (+997.6%)
Mutual labels: datatable
Vue Handsontable Official
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
Stars: ✭ 751 (+349.7%)
Mutual labels: datatable
Vue Datatables Net
Vue jQuery DataTables.net wrapper component
Stars: ✭ 119 (-28.74%)
Mutual labels: datatable
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 (-2.4%)
Mutual labels: datatable
Weihanli.npoi
NPOI Extensions, excel/csv importer/exporter for IEnumerable<T>/DataTable, fluentapi(great flexibility)/attribute configuration
Stars: ✭ 157 (-5.99%)
Mutual labels: datatable
Edittable
jQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default input field for data tables.
Stars: ✭ 139 (-16.77%)
Mutual labels: datatable
django-datatable
|Build Status| |PyPI|
.. figure:: https://www.shymonk.com/django-datatable/static/django_datatable_example.png :alt: preview
online demo <https://www.shymonk.com/django-datatable/datasource/model/>__
Overview
django-datatable is a simple Django app to organize data in tabular
form based on datatable <http://datatables.net>__ and
bootstrap <http://getbootstrap.com/>__.
It is worth mentioning that the design of this project makes reference
to django-table2 <https://github.com/bradleyayers/django-tables2>__
and is mainly for the purpose of learning. I really appreciate anyone
making a pull-request to improve it.
Requirements
-
Python 2.x
-
jQuery 1.6+
-
Django 1.5+
-
Bootstrap 3.0
Quick start
-
Setup Django-datatable application in Python environment:
::
$ pip install django-datatable -
Define a simple model named Person:
::
# example/app/models.py class Person(models.Model): name = models.CharField(max_length=100) -
Add "table" to your INSTALLED_APPS setting like this:
::
INSTALLED_APPS = ( ..., 'table', ) -
Add some data so you have something to display in the table. Now define a PersonTable class without any options in the table file.
::
# example/app/tables.py from models import Person from table import Table from table.columns import Column class PersonTable(Table): id = Column(field='id') name = Column(field='name') class Meta: model = Person
And pass a table instance to the view.
::
# example/app/views.py
from django.shortcuts import render
from app.tables import PersonTable
def people(request):
people = PersonTable()
return render(request, "index.html", {'people': people})
-
Finally, implement the template:
::
{# example/templates/index.html} {% load static %} {% load table_tags %} <link href="{% static 'table/css/bootstrap.min.css' %}" rel="stylesheet"> <script src="{% static 'table/js/jquery.min.js' %}"></script> <script src="{% static 'table/js/bootstrap.min.js' %}"></script> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>person</title> </head> <body> <div class="container" style="margin-top: 10px"> <h1>people</h1> <br /> {% render_table people %} </div> </body> </html>
Tag
Render the whole table by simple tag {% render_table %}, pass
Table instance as single argument.
::
{% render_table table %}
DataSource
Model
Uses a django MTV model as table data source, and queries all data in
database by default. See **model** in table options for details.
QuerySet
Similiar to Model, but pass queryset when you initialize the table instance instead of defining model option. Basically, it is used to filter or sort data you want to display in table.
::
Models:
# models.py
class Person(models.Model):
name = models.CharField(max_length=100)
Tables:
# tables.py
from models import Person
from table import Table
from table.columns import Column
class PersonTable(Table):
id = Column(field='id')
name = Column(field='name')
Views:
# views.py
from django.shortcuts import render
from models import Person
from app.tables import PersonTable
def people(request):
people = PersonTable(Person.objects.all())
return render(request, "index.html", {'people': people})
Dict-List
Use a list of dictionaries as table data source. Fields declared in
columns correspond to the dictionary keys.
::
Tables:
# tables.py
from table import Table
from table.columns import Column
class PersonTable(Table):
id = Column(field='id')
name = Column(field='name')
Views:
# views.py
from django.shortcuts import render
from app.tables import PersonTable
def people(request):
data = [{'id': 1, 'name': 'John'}, {'id': 2, 'name': 'Tom'}]
people = PersonTable(data)
return render(request, "index.html", {'people': people})
Built-in Ajax
For large amounts of data, loading them on front-end entirely is impossible. So, django-table provides a simle option 'ajax' to load data from the server-side asynchronously.
Note that once toggling ajax, the model option is necessary.
Django-table will do paging/searching/sorting based on
ModelClass.objects.all().
::
Urls:
# urls.py
urlpatterns = patterns('',
url(r'^table/', include(table.urls')),
)
Tables:
# tables.py
from table import Table
from table.columns import Column
class PersonTable(Table):
id = Column(field='id')
name = Column(field='name')
class Meta:
model = Person
ajax = True
Custom Ajax
If you want to customize base data, use ``ajax_source`` option and
implement your own Class-based View by subclassing ``FeedDataView``.
::
Tables:
# tables.py
class PersonTable(Table):
id = Column(field='id')
name = Column(field='name')
class Meta:
model = Person
ajax = True
ajax_source = reverse_lazy('table_data')
Urls:
# urls.py
urlpatterns = patterns('',
url(r'^table/data/$', MyDataView.as_view(), name='table_data'),
)
Views:
# views.py
from table.views import FeedDataView
from app.tables import PersonTable
class MyDataView(FeedDataView):
token = PersonTable.token
def get_queryset(self):
return super(MyDataView, self).get_queryset().filter(id__gt=5)
Columns
-------
- Column
- Link Column
- Datetime Column
- Checkbox Column
- Sequence Column
- Calendar Column
Widgets
-------
- search-box
- info-label
- pagination
- length-menu
- exten-button(deprecated)
API Reference
-------------
- `wiki <https://github.com/shymonk/django-datatable/wiki/API-Reference>`__
.. |Build Status| image:: https://travis-ci.org/shymonk/django-datatable.svg?branch=master
:target: https://travis-ci.org/shymonk/django-datatable
.. |PyPI| image:: https://img.shields.io/pypi/v/django-datatable.png
:target: https://pypi.python.org/pypi/django-datatable
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].