# Did anyone try to embed Datatables into Topic Body?
**URL:** https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299
**Category:** Feature
**Created:** [September 23, 2019, 12:59pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299 "2019-09-23T12:59:47Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Raghu\_Nandan\_Avula](https://meta.discourse.org/u/Raghu_Nandan_Avula)
#### Post date: [September 23, 2019, 12:59pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/1 "2019-09-23T12:59:47Z")
Hello Community,
Did anyone try to embed [Data tables](https://datatables.net/) into Topic Body ? Any plugin or theme ?
Thanks,
---
### Author:  [@EricGT](https://meta.discourse.org/u/EricGT)
#### Post date: [September 23, 2019, 1:10pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/2 "2019-09-23T13:10:10Z")
> [@Raghu\_Nandan\_Avula](#):
>
> Did anyone try to embed [Data tables](https://datatables.net/) into Topic Body ?
I tried making tables with a some links to images within a cell and failed. See: [How to make a nice table in a post?](https://swi-prolog.discourse.group/t/how-to-make-a-nice-table-in-a-post/1273)
So by extension, I don’t think basic Discourse will allow this.
If it is possible I would like to know how.
> [@Raghu\_Nandan\_Avula](#):
>
> Any plugin or theme ?
Since the site I am on can not add more plug-ins per the plan/agreement, I could not run down that option path.
---
### Author:  [@Raghu\_Nandan\_Avula](https://meta.discourse.org/u/Raghu_Nandan_Avula)
#### Post date: [September 23, 2019, 1:20pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/3 "2019-09-23T13:20:52Z")
> [@EricGT](#):
>
> If it is possible I would like to know how.
>
>  Raghu\_Nandan\_Avula:
Yeah, I don’t know how to implement this.
---
### Author:  [@EricGT](https://meta.discourse.org/u/EricGT)
#### Post date: [September 23, 2019, 1:42pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/4 "2019-09-23T13:42:42Z")
Not the full boat, but maybe good enough to get you started.
* * *
Show 102550100 entries
Search:
| Name | Position | Office | Age | Start date | Salary |
| --- | --- | --- | --- | --- | --- |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Name | Position | Office | Age | Start date | Salary |
| --- | --- | --- | --- | --- | --- |
Showing 1 to 10 of 57 entries
Previous123456Next
* * *
The above HTML was created by opening [link](https://datatables.net/) provided (using Chorme), press F12,
select HTML in code viewer
then (Windows) right mouse select `Copy` → `Copy OutterHTML`
and pasted into this post.
I know it doesn’t have all of the bells and whistles of the original, but at least you can compare this HTML with the original and see what Discourse filters out to learn what you can and can not do.
Also if someone with more trust can convert this to a Wiki so others can view the raw HTML it would be appreciated.
HTH
* * *
EDIT
Expanding on cutting and pasting, I cut the full page out and pasted into a [post](https://try.discourse.org/t/test-of-discourse-filter/1373) at [try.discourse.org](https://try.discourse.org/) to see if the buttons for sorting would make it through. No such luck.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 23, 2019, 1:51pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/5 "2019-09-23T13:51:46Z")
That result is just a Markdown table which is supported by Discourse:
> **[Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables)**
>
> Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. - adam-p/markdown-here
---
### Author:  [@Raghu\_Nandan\_Avula](https://meta.discourse.org/u/Raghu_Nandan_Avula)
#### Post date: [September 23, 2019, 1:53pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/6 "2019-09-23T13:53:45Z")
Great. But does it have Data table functionality like sorting, searching ?
---
### Author:  [@EricGT](https://meta.discourse.org/u/EricGT)
#### Post date: [September 23, 2019, 1:56pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/7 "2019-09-23T13:56:46Z")
> [@Raghu\_Nandan\_Avula](#):
>
> But does it have Data table functionality like sorting, searching ?
No.
My best guess on how to do that would be to use JavaScript, but I don’t know how much of that will be filtered out of Discourse. When I ran into the same line of problems, I eventually came to the conclusion that it would be easier to to put the page with the info somewhere else and provide a link. Don’t try and force Discourse into something it is not, and don’t try and circumvent the security Discourse provides, it is there for a good reason.
---
### Author:  [@Raghu\_Nandan\_Avula](https://meta.discourse.org/u/Raghu_Nandan_Avula)
#### Post date: [September 23, 2019, 1:58pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/8 "2019-09-23T13:58:31Z")
That’s true, My best option is adding the datatable in an html page and embed it into Discourse topic using iframe.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [September 23, 2019, 3:54pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/9 "2019-09-23T15:54:24Z")
Datatables is a jQuery plugin. jQuery plugins can be implemented quite easily in Discourse. There are a couple of examples of this like the [Tiles](https://github.com/discourse/Discourse-Tiles-image-gallery/blob/master/common/header.html) and [Slick](https://github.com/discourse/Discourse-Slick-image-gallery/blob/master/common/header.html) gallery theme components.
Essentially, what you need to do is to create a decorator for posts that contain tables that you want to target with dataTables.
I’ve created an example of how you can do that here
> **[GitHub - hnb-ku/dataTables\_Demo](https://github.com/hnb-ku/dataTables_Demo)**
>
> Contribute to hnb-ku/dataTables\_Demo development by creating an account on GitHub.
and created a preview for it on theme creator here
[https://theme-creator.discourse.org/theme/Johani/discourse\_datetables](https://theme-creator.discourse.org/theme/Johani/discourse_datetables)
It’s obviously a bit basic for now, and it’s missing some styles but it should be a good starting point as sorting, searching and pagination work just fine.
---
### Author:  [@Raghu\_Nandan\_Avula](https://meta.discourse.org/u/Raghu_Nandan_Avula)
#### Post date: [September 23, 2019, 6:01pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/10 "2019-09-23T18:01:01Z")
This is incredibe 🙂 Thank you very much
---
### Author:  [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [June 27, 2021, 3:53pm UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/11 "2021-06-27T15:53:23Z")
I have several tables that I’d like to include in my forum and your approach works perfectly. I’ve created this theme component initializer file:
```js
import { apiInitializer } from 'discourse/lib/api';
import loadScript from 'discourse/lib/load-script';
export default apiInitializer('0.11.1', (api) => {
api.decorateCookedElement(
(elem, helper) => {
const dataTables = $('[data-wrap="dataTables"] table', elem);
if (!dataTables.length) return;
loadScript('https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js').then(
() => {
$.fn.dataTable.ext.errMode = 'throw';
dataTables.dataTable({
ajax: {
url:
'https://gist.githubusercontent.com/USERNAME/MY_GIST_ID/raw/data.json',
dataSrc(data) {
return data.map((x) => {
return {
id: x.my_id,
title: `${x.number} - ${x.title}`,
};
});
},
},
columns: [
{ data: 'id', title: 'My ID' },
{ data: 'title', title: 'My Title' }
],
dom: 'Bfrt',
});
}
);
},
{ id: 'discourse-my-custom-data-tables', onlyStream: true }
);
});
```
And I load the table in the post using this:
```plaintext
[wrap=dataTables]
[/wrap]
```
However, there are multiple things I’d like to customize for each table and I’m not sure how to go about it.
For example:
- I’d like to use a different Gist Id for each table. That should be easy enough by passing an attribute to the wrap and then accessing it with `elem.children[0].dataset.gist`:
- But what if I want multiple tables, each with different processing code in the `dataSrc` function or different `column` or `dom` parameters?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 30, 2021, 7:44am UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/12 "2021-06-30T07:44:12Z")
Is there a set number of variations you would likely use for different tables, or will you need to use custom ones for each table?
---
### Author:  [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [June 30, 2021, 8:26am UTC](https://meta.discourse.org/t/did-anyone-try-to-embed-datatables-into-topic-body/129299/13 "2021-06-30T08:26:13Z")
Custom ones for each table.
My current approach is to create helper js files with different configurations and choose between them via an attribute in the [wrap] block. Then I do:
```plaintext
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
```
But I’d be curious to know if there’s a more flexible solution.