Hi,
i built a table using Dash Data table, i made some modifications using css file locally. now when i use filter option, the word contains appears after filtering action. please give any possible suggestions
import sys
from urllib.parse import parse_qs
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as table
import pandas as pd
from dash.dependencies import Output, Input
from urllib.parse import quote
from datetime import datetime, timedelta
# import files
import sqlQuries
import validateUser
import filterPage
from application import app
sys.path.append('/home/ec2-user/projects/dashboard/')
data = pd.DataFrame(columns=['Created Date', 'Source of Incoming', 'Ward Name', 'Vehicle No', 'Incoming Waste',
'Type of waste', 'Unit Rate', 'Bill No./Receipt no', 'Total Amount(Rs)',
'Mode of payment'])
layout = dcc.Loading(id='inwardLoading', type='circle', children=[
html.Div([
dcc.Location(id='urlInward', refresh=False),
html.Div(id='user1', style={'display': 'none'}),
html.Div([
html.Div(
"All the orders created from Web Portal & Mobile App are displayed here ",
style={'text-align': 'left'}, className='desc-text col-10'),
html.Div([
html.A(
[
html.Img(src='../assets/download.png')
],
id='downloadChosen',
download="inwardData.csv",
href="",
target="_blank",
className="btn btn-outline-secondary downloadBtn float-right"
)
], className='col-2')
], className='row'),
html.Div([
table.DataTable(id='incomingTable',
columns=[{'name': i, 'id': i} for i in data.columns],
page_current=0, page_size=20, page_action='custom', filter_action='custom',
sort_action='custom', sort_mode='multi', sort_by=[], filter_query='', ),
html.Div(id="paginationStr")
])
], className='container-fluid')
])
def getuserId(value):
print(value)
if value is None:
raise dash.exceptions.PreventUpdate("given a valid userId as parameter")
userToken = parse_qs(value).get('?token')[0]
user = validateUser.getUserIdFromToken(userToken)
print(user)
return user
@app.callback(
[
Output('incomingTable', 'data'),
Output('downloadChosen', 'href')
],
[
Input('incomingTable', 'page_current'),
Input('incomingTable', 'page_size'),
Input('incomingTable', 'sort_by'),
Input('incomingTable', 'filter_query'),
Input('urlInward', 'search')
])
def loadDate(page_current, page_size, sort_by, filter, value):
user = getuserId(value)
dff = sqlQuries.getIncomingWasteData(user)
if dff.empty:
dff['Created Date'] = "No Data"
return dff.to_dict('records'), "data:text/csv;charset=utf-8," + quote("")
dff['Created Date'] = [str(datetime.strftime(i, '%d-%m-%Y')) for i in dff['Created Date']]
dff['Total Amount(Rs)'] = [int(i) for i in dff['Total Amount(Rs)']]
if filter is not None:
dff = filterPage.getFilteredTable(dff, filter)
if len(sort_by):
dff = dff.sort_values(
sort_by[0]['column_id'],
ascending=sort_by[0]['direction'] == 'asc',
inplace=False)
load = dff.iloc[page_current * page_size:(page_current + 1) * page_size]
csvString = dff.to_csv(index=False, encoding='utf-8')
csvString = "data:text/csv;charset=utf-8," + quote(csvString)
return load.to_dict('records'), csvString
css file as follows
/*Report Layout Styling*/
/*.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter {*/
/* border: 1px solid black;*/
/* border-radius: 10px;*/
/* padding: 10px;*/
/* !*border-top-left-radius: 5px;*!*/
/* !*border-bottom-left-radius: 5px;*!*/
/*}*/
@font-face {
font-family: 'font-light';
src: url('./fonts/soleil-light.ttf');
}
@font-face {
font-family: 'font-regular';
src: url('./fonts/soleil-regular.ttf');
}
@font-face {
font-family: 'font-medium';
src: url('./fonts/soleil-semibold.ttf');
}
@font-face {
font-family: 'font-bold';
src: url('./fonts/soleil-bold.ttf');
}
@font-face {
font-family: 'font-book';
src: url('./fonts/soleil-book.ttf');
}
.grey-bg {
background-color: #5b7583;
color: #fff;
font-family: font-regular;
font-size: 12px;
}
/*Styling table*/
.grey-bg th:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.grey-bg th:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
table td, th{
font-family: 'font-regular';
font-size: 12px;
color: #5B7583;
border: 0!important;
text-align: left!important;
height: 45px!important;
vertical-align: middle!important;
padding: 10px!important;
}
tbody td.dash-cell{
background-color: #ffffff!important;
text-align: left!important;
padding: 10px!important;
}
tbody tr:nth-child(even) td.dash-cell {
background-color: #f9f9f9!important;
}
tbody tr td:last-child, th:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
tbody tr td:first-child, th:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tbody th.dash-filter{
/*background-color: #f9f9f9!important;*/
border: 0 !important;
border-radius: 0!important;
}
tbody th.dash-filter input{
position: relative!important;
/*background-color: #fff!important;*/
height: 30px!important;
text-align: left!important;
padding: 0 5px!important;
border-radius: 6px;
}
tbody th.dash-filter input::placeholder{
color: #ffffff!important;
}
tbody th.dash-filter input::-ms-value{
color: #ffffff!important;
}
tbody th.dash-header{
background-color: #5b7583!important;
color: #fff;
text-align: left!important;
height: 34px!important;
padding: 0 0 0 10px!important;
}
tbody th.dash-header{
--accent: #fff!important;
}
tbody th.dash-header>div{
float: left;
}
tbody th.dash-header>div span.column-header--sort{
float: right!important;
}
tbody th.dash-header>div span.column-header-name{
float: right!important;
margin-right: 5px!important;
}
span.column-header--sort{
padding-right: 5px;
}
span.column-header--sort:hover, span.column-header--sort:focus{
color: inherit!important;
}
/*styling previous and next button */
.previous-next-container{
padding: 0 0;
border: 1px solid #c7d2d8;
margin: 15px 0!important;
border-radius: 5px!important;
display: flex!important;
height: 30px!important;
align-items: center!important;
}
.previous-next-container .first-page{
display: none!important;
}
.previous-next-container .last-page{
display: none!important;
}
.previous-next-container button.next-page{
border-left: 1px solid #5b7583!important;
opacity: 0.5!important;
padding: 0 5px 0 5px!important;
background-color: transparent!important;
}
.previous-next-container button.previous-page{
border-right: 1px solid #5b7583!important;
opacity: 0.5!important;
padding: 0 5px 0 5px!important;
background-color: transparent!important;
}
.previous-next-container input.current-page{
height: 24px!important;
width: 24px!important;
margin: 0.2em!important;
color: #fff!important;
background-color: #5b7583!important;
border-radius: 5px!important;
border-bottom: none!important;
pointer-events: none;
}
.previous-next-container input.current-page::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ffffff!important;
}
.previous-next-container input.current-page::-moz-placeholder { /* Firefox 19+ */
color: #ffffff!important;
}
.previous-next-container input.current-page:-ms-input-placeholder { /* IE 10+ */
color: #ffffff!important;
}
.previous-next-container input.current-page:-moz-placeholder { /* Firefox 18- */
color: #ffffff!important;
}