# How to assign a className to dash\_table.DataTable?

**URL:** <https://community.plotly.com/t/how-to-assign-a-classname-to-dash-table-datatable/49802>\
**Category:** Dash Python\
**Created:** [February 8, 2021, 8:28am UTC](https://community.plotly.com/t/how-to-assign-a-classname-to-dash-table-datatable/49802 "2021-02-08T08:28:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tkepic](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tkepic](https://community.plotly.com/u/tkepic)\
**Post date:** [February 8, 2021, 8:28am UTC](https://community.plotly.com/t/how-to-assign-a-classname-to-dash-table-datatable/49802/1 "2021-02-08T08:28:42Z")

</div>

Hello folks,

for styling an html.Table we can assign a className for whole table.

However, instead of Table I would like to use im my app DataTable, which generates also tags.  
Instead of defining styles for header, cells, etc I would like to use a className.

Is that a possible?

Thanks,  
Tomas

Html code for my table:

```auto
<table id="datatables-column-search-text-inputs" class="table table-striped" style="width:100%">
										<thead>
											<tr>
												<th>Name</th>
												<th>Position</th>
												<th>Office</th>
												<th>Age</th>
												<th>Start date</th>
												<th>Salary</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Tiger Nixon</td>
												<td>System Architect</td>
												<td>Edinburgh</td>
												<td>61</td>
												<td>2011/04/25</td>
												<td>$320,800</td>
											</tr>
											<tr>
												<td>Garrett Winters</td>
												<td>Accountant</td>
												<td>Tokyo</td>
												<td>63</td>
												<td>2011/07/25</td>
												<td>$170,750</td>
											</tr>
											<tr>
												<td>Ashton Cox</td>
												<td>Junior Technical Author</td>
												<td>San Francisco</td>
												<td>66</td>
												<td>2009/01/12</td>
												<td>$86,000</td>
											</tr>
											<tr>
												<td>Cedric Kelly</td>
												<td>Senior Javascript Developer</td>
												<td>Edinburgh</td>
												<td>22</td>
												<td>2012/03/29</td>
												<td>$433,060</td>
											</tr>
											<tr>
												<td>Airi Satou</td>
												<td>Accountant</td>
												<td>Tokyo</td>
												<td>33</td>
												<td>2008/11/28</td>
												<td>$162,700</td>
											</tr>
											<tr>
												<td>Brielle Williamson</td>
												<td>Integration Specialist</td>
												<td>New York</td>
												<td>61</td>
												<td>2012/12/02</td>
												<td>$372,000</td>
											</tr>
											<tr>
												<td>Herrod Chandler</td>
												<td>Sales Assistant</td>
												<td>San Francisco</td>
												<td>59</td>
												<td>2012/08/06</td>
												<td>$137,500</td>
											</tr>
											<tr>
												<td>Rhona Davidson</td>
												<td>Integration Specialist</td>
												<td>Tokyo</td>
												<td>55</td>
												<td>2010/10/14</td>
												<td>$327,900</td>
											</tr>
											<tr>
												<td>Colleen Hurst</td>
												<td>Javascript Developer</td>
												<td>San Francisco</td>
												<td>39</td>
												<td>2009/09/15</td>
												<td>$205,500</td>
											</tr>
											<tr>
												<td>Sonya Frost</td>
												<td>Software Engineer</td>
												<td>Edinburgh</td>
												<td>23</td>
												<td>2008/12/13</td>
												<td>$103,600</td>
											</tr>
											<tr>
												<td>Jena Gaines</td>
												<td>Office Manager</td>
												<td>London</td>
												<td>30</td>
												<td>2008/12/19</td>
												<td>$90,560</td>
											</tr>
											<tr>
												<td>Quinn Flynn</td>
												<td>Support Lead</td>
												<td>Edinburgh</td>
												<td>22</td>
												<td>2013/03/03</td>
												<td>$342,000</td>
											</tr>
											<tr>
												<td>Charde Marshall</td>
												<td>Regional Director</td>
												<td>San Francisco</td>
												<td>36</td>
												<td>2008/10/16</td>
												<td>$470,600</td>
											</tr>
											
											<tr>
												<td>Donna Snider</td>
												<td>Customer Support</td>
												<td>New York</td>
												<td>27</td>
												<td>2011/01/25</td>
												<td>$112,000</td>
											</tr>
										</tbody>
										<tfoot>
											<tr>
												<th>Name</th>
												<th>Position</th>
												<th>Office</th>
												<th>Age</th>
												<th>Start date</th>
												<th>Salary</th>
											</tr>
										</tfoot>
									</table>

```

Assigned javascript:

```auto
<script>
		// DataTables with Column Search by Text Inputs
		document.addEventListener("DOMContentLoaded", function() {
			// Setup - add a text input to each footer cell
			$('#datatables-column-search-text-inputs tfoot th').each(function() {
				var title = $(this).text();
				$(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
			});
			// DataTables
			var table = $('#datatables-column-search-text-inputs').DataTable();
			// Apply the search
			table.columns().every(function() {
				var that = this;
				$('input', this.footer()).on('keyup change clear', function() {
					if (that.search() !== this.value) {
						that
							.search(this.value)
							.draw();
					}
				});
			});
		});
		
	</script>

```

I would like to apply above into dash DataTable for my dataframe.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 8, 2021, 5:08pm UTC](https://community.plotly.com/t/how-to-assign-a-classname-to-dash-table-datatable/49802/2 "2021-02-08T17:08:00Z")

</div>

Hi @tkepic

I’m not sure exactly what you are trying to do here, but it appears that you want to integrate a datatable from [https://datatables.net/](https://datatables.net/). Is that correct? If so, is there a reason you don’t want to use a dash DataTable and define it as shown here [Dash DataTable | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable)

---

<div class="post-metadata">

**Author:** ![tkepic](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tkepic](https://community.plotly.com/u/tkepic)\
**Post date:** [February 8, 2021, 6:52pm UTC](https://community.plotly.com/t/how-to-assign-a-classname-to-dash-table-datatable/49802/3 "2021-02-08T18:52:49Z")

</div>

Hi Ann,

thank you for your response.

A brief info regarding what I am trying to do.  
At the moment I am developing a financial portal for my own personal use. As a main logic is done in python I decided for creating a dash application - as it seems like a quite robust in this field.

Also as a creating graphic layouts is not my strength, I found and bought an html bootstrap template.  
Hopefully I will not break a forum rule, if I post it here:  
[https://appstack.bootlab.io/tables-datatables-responsive.html](https://appstack.bootlab.io/tables-datatables-responsive.html)

And based on this template I am applying styles into my dash application.

So far I managed to create navigation bar, read icons, and other small details (picture below).  
In my application I read data from local database through pandas dataframe. Those data I want to display via dash\_table.DataTable with pagination. Unfortunately I don’t know how to correctly assign a className to this element, so code which is rendered once app is displayed will have with correct styling class set.

Here is a bit of code for creating a DataTable in my dash:

```auto
def generate_Dashtable(dataframe, max_rows=10):
    return html.Span([
                    dash_table.DataTable(
                        # id='datatable-paging',
                        # data=dataframe.to_dict('records'),
                        data = dataframe.iloc[0:max_rows].to_dict('records'),

                        id='datatables-column-search-text-inputs',
                        columns=[{'name': i, 'id': i} for i in dataframe.columns],

                        page_current=0,
                        page_size=max_rows,
                        page_action='custom',

                        filter_action='custom',
                        filter_query='',

                        sort_action='custom',
                        sort_mode='multi',
                        sort_by=[]
                    )
          ], className='table table-striped'
          )

```

Here is an printscreen on my demo app:

 ![application](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/ce293c0086f0bd18dc66102d3d3c3827bf029329.jpeg)

Let me know If you understand what I mean.

Tomas

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 8, 2021, 7:26pm UTC](https://community.plotly.com/t/how-to-assign-a-classname-to-dash-table-datatable/49802/4 "2021-02-08T19:26:56Z")

</div>

Oh, I see - thanks for your explanation.

Sorry, I don’t have any experience using a template like this. Perhaps someone else on the forum can help.