Problem
#389 idea was good but too much to code and determine. We need to go in small steps. Starting with making easy to create data-tables without re-writing same code everywhere.
Solution
I would like to separate this into two:
First phase is backend utility: a function that will generate the response output from model.
Second phase is to create a dynamic React data-table that will generate the list from given information.
First phase: Backend utility
A single function that will return desired result
Function Name
build_table_data()
Function Parameters
request
Request object is needed to determine page, page size, sorting, filtering
model
Model object that needs to be filtered. Can pass initial filtering with like UserMode.objects.filter(is_active=True)
fields
A dict object with following format:
[
{ 'field_name': str, 'label': str, 'sortable': bool, 'filterable': bool, 'transform': Optional[Callable[[any, any], any] },
]
field_name key might have related fields like user.profile.email. It should resolve them.
transform is an optional key. if presented, it must be a function that takes a value and returns the transformed one. First parameter of transform is value itself, second parameter is the current row in case some other value is needed from same row object.
'options'
An options dict map that enables/disables data-table features:
{
'sorting': bool,
'filtering': bool,
'page_size: int, # default to 20,
'row_actions': Optional[List[
{ 'icon': str, 'link': str, 'title': str, dynamic: List[str] },
]],
}
row_actions is optional.
link should be in format of /path/to/somewhere/:some_field/:id.
dynamic will hold the field names used to build URL.
Return
The return must have following format:
{
'options': {
'sorting': bool,
'filtering': bool,
'columns': [
{ 'field_name': str, 'label': str, 'sortable': bool, 'filterable': bool },
],
'row_actions': []
},
'page_size': int,
'current_page': int,
'total_pages': int,
'total_records': int,
'sort_by: str,
'sort_direction; 'asc'|'desc'
'data': []
}
Problem
#389 idea was good but too much to code and determine. We need to go in small steps. Starting with making easy to create data-tables without re-writing same code everywhere.
Solution
I would like to separate this into two:
First phase is backend utility: a function that will generate the response output from model.
Second phase is to create a dynamic React data-table that will generate the list from given information.
First phase: Backend utility
A single function that will return desired result
Function Name
build_table_data()Function Parameters
requestRequest object is needed to determine
page,page size,sorting,filteringmodelModel object that needs to be filtered. Can pass initial filtering with like
UserMode.objects.filter(is_active=True)fieldsA
dictobject with following format:[ { 'field_name': str, 'label': str, 'sortable': bool, 'filterable': bool, 'transform': Optional[Callable[[any, any], any] }, ]field_namekey might have related fields likeuser.profile.email. It should resolve them.transformis an optional key. if presented, it must be a function that takes a value and returns the transformed one. First parameter of transform is value itself, second parameter is the current row in case some other value is needed from same row object.'options'
An options dict map that enables/disables data-table features:
{ 'sorting': bool, 'filtering': bool, 'page_size: int, # default to 20, 'row_actions': Optional[List[ { 'icon': str, 'link': str, 'title': str, dynamic: List[str] }, ]], }row_actionsis optional.linkshould be in format of/path/to/somewhere/:some_field/:id.dynamicwill hold the field names used to build URL.Return
The return must have following format:
{ 'options': { 'sorting': bool, 'filtering': bool, 'columns': [ { 'field_name': str, 'label': str, 'sortable': bool, 'filterable': bool }, ], 'row_actions': [] }, 'page_size': int, 'current_page': int, 'total_pages': int, 'total_records': int, 'sort_by: str, 'sort_direction; 'asc'|'desc' 'data': [] }