Hello Community,
Did anyone try to embed Data tables into Topic Body ? Any plugin or theme ?
Thanks,
「いいね！」 2
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?
So by extension, I don’t think basic Discourse will allow this.
If it is possible I would like to know how.
Since the site I am on can not add more plug-ins per the plan/agreement, I could not run down that option path.
「いいね！」 1
Yeah, I don’t know how to implement this.
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
The above HTML was created by opening link 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 at try.discourse.org to see if the buttons for sorting would make it through. No such luck.
「いいね！」 1
That result is just a Markdown table which is supported by Discourse:
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables
「いいね！」 2
Great. 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.
「いいね！」 3
That’s true, My best option is adding the datatable in an html page and embed it into Discourse topic using iframe.
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 and Slick 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
https://github.com/hnb-ku/dataTables_Demo
and created a preview for it on theme creator here
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.
「いいね！」 12
This is incredibe 
Thank you very much
「いいね！」 3
複数のテーブルをフォーラムに含めたいと考えており、あなたのアプローチは完璧に機能しています。私はこのテーマコンポーネントの初期化ファイルを作成しました：
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 }
);
});
そして、投稿内で以下のようにテーブルを読み込んでいます：
[wrap=dataTables]
<table></table>
[/wrap]
ただし、各テーブルに対してカスタマイズしたい項目が複数あり、どのように進めればよいか確信が持てません。
例えば：
-
各テーブルで異なる Gist ID を使用したいです。これは、wrap に属性を渡して
elem.children[0].dataset.gistでアクセスすることで比較的簡単に実現できるはずです：[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
しかし、
dataSrc関数内で異なる処理コード、または異なるcolumnやdomパラメータを持つ複数のテーブルを作成したい場合はどうすればよいでしょうか？dataTables.dataTable()に JS 設定ファイルを渡す方法はありますか？
「いいね！」 3
テーブルごとに異なるバリエーションをいくつ使う予定でしょうか、それとも各テーブルに合わせたカスタムバリエーションが必要になりますか？
「いいね！」 1
テーブルごとにカスタム設定を適用します。
現在のアプローチは、異なる設定を含むヘルパー JS ファイルを作成し、[wrap] ブロック内の属性を通じてそれらを選択する方法です。その後、以下のようにします。
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
しかし、より柔軟な解決策があるかどうか興味があります。
「いいね！」 1