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