Code for the table on the datatables.net front page.

drakgoku

I'm looking for the "exact" code for the table on the front page.

I read this: https://datatables.net/forums/discussion/72780/code-for-example-on-front-page

and it's the worst answer in years. So I hope someone at least tells me where I can find it.

I also hope they don't tell me:
- You have to build it yourself
- Nobody gives you anything ready-made
- ...

Because if not, I'll go to another library in no time.

kthorngren

and it's the worst answer in years.

That's an old question from 3 years ago which is not accurate now with the homepage example updates. The homepage example was recently updated with the new ColumnControl extension which wasn't available when I answered that forum post many years ago. Please note the screenshot in the thread you linked doesn't contain the elements you are showing in the screenshot.

Take a look at the examples along with the other docs to learn how ColumnControl works.

Please post any questions specific you have and we will be happy to help with more specific answers.

Kevin

kthorngren

Forgot to mention the is a blog post for the new ColumnControl extension.

Kevin

allan

Here is the exact code:

        $('#example')
                .addClass( 'nowrap' )
                .dataTable( {
                    responsive: true,
                    columnControl: [
                        'order',
                        ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                    ],
                    columnDefs: [
                        {
                            targets: [1, 2],
                            columnControl: [
                                'order',
                                ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                            ],
                        },
                        {
                            target: 4,
                            render: DataTable.render.date(),
                        },
                        {
                            target: 5,
                            render: DataTable.render.number(null, null, 0, '$'),
                        },
                        {
                            targets: [3, 4 ,5],
                            className: 'dt-body-right'
                        }
                    ],
                    ordering: {
                        indicators: false
                    }
                } );

You can see it on the page by simply right clicking and select "View source".

Most of the configuration there is for the ColumnControl aspect, and it is a bit specific to the data in that table. responsive: true obviously enabled Responsive. The items in the four quadrants you've highlighted are from the DataTables defaults and built into the core - see this example which is simply:

new DataTable('#example');

(which is the same as $('#example').DataTable();).

• You have to build it yourself
• Nobody gives you anything ready-made

Hah - DataTables is open source (free!) and is ready made for you to use . There are loads of options and many, many ways to configure the table for your data and your UI. The idea is that it should be flexible enough to cope (obviously not with absolutely everything, but hopefully enough for most cases!).

The examples are a good way to get an idea of what the capabilities are. If you have any questions, let me know!

Allan

allan

One extra thing I should say about the code on the home page, you'll see that I've got it using two renderers, one for numbers one for dates. Those are used for internationalisation - the date and number will be shown in a format suitable for the user's browser's locale setting. Information about that is available here.

Allan

drakgoku

I've tried both codes. Neither your suggested code nor the one on the "~/blog/2025/columncontrol" page, nor the filters, appear.
https://i.imgur.com/KRRHrTQ.png
Why? Am I missing something to import?

kthorngren

Yes you need to install the extensions you wish to use like Responsive and/or ColumnControl. See the Responsive docs and ColumnControl docs for details. It also looks like you are missing the datatables.css for the proper styling of the Datatable.

Use the Download Builder to get the proper code you want to use.

Kevin

drakgoku

I just added them.

But it's still the same.

Why didn't you post the full example instead of just parts?

drakgoku

It does work, but since I don't have the styles, I couldn't see the icons (they appear dark) and I couldn't see them.
Thank you very much. If I have any questions about any of the features, I'll ask again.

allan

Gosh yes, it is dark there. Since you are using the DataTables default styling, add class="dark" to your html element, which will trigger the dark mode options in the DataTables default CSS. See this page in the manual for more details on that.

Allan

kthorngren

Why didn't you post the full example instead of just parts?

The ColumnControl examples, along with all other examples on this site, have tabs below the table showing what is needed for the Javascript, HTML and CSS code for each specific example.

Kevin

drakgoku

Why didn't you post the full example instead of just parts

When I wanted to edit the comment, I couldn't edit the comment and had to create another comment. That seems to be how this forum works.

I'm seeing that loading it with a CDN and passing the JS -> to JSX (React) is giving me a ton of problems... for a backend person like me... having to create a global interface for it to work isn't very cool, and it seems the examples are in JS and not JSX with the corresponding hooks. Pfff.
Simply put.
- With CDN -> Use an interface for $
- With npm -> I don't have to do anything, but the structure changes.

Anyway, I'll ask the AI ​​and have it do it for me...

You should include "the code you gave me" for React. With an example of a component and its corresponding hook. But it seems these days it's better to copy and paste from an AI. Harsh reality.

Note: I'm in React. Not plain HTML.

I think programming has been relegated these days to simply copying and pasting. It's interesting how everything evolves.

kthorngren

I don't use React so not sure if this answers your questions but this blog shows how to use the Download builder with React. Also this DataTables React component blog will be of interest. It has some examples on Stackblitz.

Anyway, I'll ask the AI ​​and have it do it for me...

Hope that works but you can also ask your questions here. This is the first you mentioned using React. The more information we have about your solution the more thorough our answers can be. Otherwise all we can do is post generic responses.

Kevin

drakgoku

Oh my god, what a mess...
I need the responsive version:

and when I search for it in the imports: it doesn't appear

The documentation says: 0% of the responsive "module" to import since it seems to be implicit. In my case, it asks me for it.
https://datatables.net/manual/react#Reactive-data
https://datatables.net/extensions/responsive/init

How do I import that library?

How easy would it be to put it like this: "https://www.ag-grid.com/" without JS, without any additional problems...

I'll see if I can solve your problem, or if not, I'll have to switch to a more modern one.

drakgoku

I understand it's this: https://i.imgur.com/nIgo5aN.png but you should put this in the datatables.net documentation instead of me doing R&D.

Now it seems the filters aren't showing, and I'm also getting this error.
DataTables warning: table id=DataTables_Table_1 - Incorrect column count. For more information about this error, please see https://datatables.net/tn/18

I'll give it 30 more minutes, or I'll leave. It's not 2005 to make it work by integrating things. It either works or it doesn't. I can't imagine having to do magic for each library.

kthorngren

I understand it's this: https://i.imgur.com/nIgo5aN.png but you should put this in the datatables.net documentation instead of me doing R&D.

Responsive is one of the Datatables extensions that need to be installed.

Now it seems the filters aren't showing, and I'm also getting this error.

Did you follow the troubleshooting steps at the link in the error?
https://datatables.net/tn/18

See the HTML requirements for more details.

Not sure why the filters aren't showing. Possibly its due to the above error. Please post a link to your page or a test case using Stackblitz showing the issues so we can help debug?

Kevin

drakgoku

Now it seems it's missing the .css...
I'm done. This may work for basic applications. But not for complex projects. I don't see the point in importing and installing 400 dependencies to make a simple table work. This is a red flag from afar. You have to know when to say enough is enough or when to throw money away. If you don't know how... well... that's the way the world goes.
Goodbye.

allan

No worries - best of luck with your dev work.

If anyone else finds this, the most straight forward way to install DataTables is with the download builder as indicated in posts above. Simply check the "React", "ColumnControl" and "Responsive" options and at the bottom of the page it will show you the packages to install (based on the styling selection you've made if you want something other than the default), the JS to load the modules and the CSS includes.

There is also a "Run on Stackbltiz" button that you can click to build a Vite based project that includes the software selected and runs it with a simple table that you can modify as you need.

Allan

drakgoku

Likewise, thanks for the help.
It's not that it's useless, I just couldn't find a way to get it working quickly, and having the dependencies scattered instead of unified in a single installation made me give up.
But that doesn't mean I won't use your library for specific cases in the future.
There are many libraries with features that more or less adapt to each user.

Thanks and best regards.