Modern Features

Responsive layout based on container width

When creating a responsive design, it is common to use a CSS media query to change the document layout based on the size of the viewport.

However, many designs have common components that change layout depending on the available width of their container. This may not always relate to the size of the viewport, but instead relate to where in the layout the component is placed.

For example, a table might be displayed in a narrow or wide column in the site layout.

If there is space it displays as regular table with columns:

Wide table

If not, we want to display it collapsed:

Narrow table

dtables, unlike other plugins, gives you the ability to change the table layout based on the width of the container rather than the width of the browser viewport.

For each column separately, you can set a breakpoint for the width of the container, when the column will either collapse or completely hide.

Please see the documentation for the corresponding settings.

Formatting date and time, the right way

It is often necessary to display a date or time in your data table. And although at first glance there is no difficulty in this, the correct solution to this problem may not be obvious.

Did you know that the following date will be read differently by the Americans and the British?

8/12/2021

In the US, it will be August 12, 2021, and in the UK, December 8, 2021. Why is that? It's all about the date formats.

In different countries and regions of the world, the same date is written in completely different ways. There are so many reasonsopen in new window for using this or that format that it is often difficult to choose the right one, especially if your site is aimed at visitors from different countries.

Fortunately, the modern Web has successfully solved this problem, and browsers have a built-in tool called Intlopen in new window that can format the date and time in a way that is understandable to the user viewing your site. And unlike other plugins, dtables takes advantage of this tool.

Using Intl, in most cases you only need to choose in which style you want to get the result: in full, long, medium or short. And the browser will do the rest: choose the appropriate format for the current locale, translate the name of the month or day of the week into that language, if necessary, and display the result. For example, for the US the result would be:

StyleResult
FullThursday, August 12, 2021
LongAugust 12, 2021
MediumAug 12, 2021
Short8/12/21

And that's all. There is no need to use third-party libraries, loading your site pages with additional kilobytes. Moreover, in most cases third-party libraries do not solve the problem of different formats depending on the current site locale.

Finally, it's worth noting that Moment.jsopen in new window, the most popular date and time formatting library, has been declared deprecatedopen in new window by its authors in favor of using tools that use Intl.

So if your current data table plugin uses Moment.js, it's time to consider whether you should switch to a more modern tool like dtables.

For more information on the available date and time formatting options, see the documentation.

Last Updated: 8/12/2021, 2:47:50 PM
Contributors: Vladimir