Table Configuration

The workspace for creating or editing a table is divided into 3 panes:

Structure

Preview

Properties

Structure

The Structure pane is intended for navigating through the table elements:

Structure

  • Data source allows you to set or create the source data that is displayed in the table.
  • Table provides access to the settings for the entire table.
  • Columns display a list of columns that exist in the table. Selecting a column opens the settings for that column.

Column visibility

There is an icon next to each column to indicate whether the column is visible or not:

Visibility icons

The top icon means the column is visible. The bottom one means the column is hidden.

By clicking on the icon, you can switch the visibility.

Sometimes, when you have a lot of hidden columns, it is convenient not to display them in the list. To do this, click on the icon next to the header:

Hide icon

By the way, the numbers above mean the number of visible and the number of hidden columns.

Properties

The Properties pane provides access to the settings for the item selected in the Structure pane.

Data source

The Data source pane allows you to configure the source data for the table.

dtables currently supports 3 types of data sources:

  • Data editor for manual data entry.
  • SQL query for fetching data from a database table.
  • File for retrieving data from a local file or remote source.

Data editor

The Data editor provides the ability to manually enter arbitrary data for your table.

Data editor

TIP

If your source data is in Excel spreadsheet, CSV file or HTML table, it is recommended to import this data into the editor. Thus, the data will be stored in the database, which will ensure that it is loaded quickly when the table is displayed.

TIP

A tool for importing data into the editor will appear in future versions of dtables. For now, you can import data by copy and paste.

Use the controls above the spreadsheet to set the required number of rows and columns.

SQL query

The SQL query allows you to define an arbitrary database query. The result of the query will serve as the source data for the table.

DANGER

dtables passes your query to the database for execution without any checks. It remains your responsibility not to provide queries that can damage the data in the database.

SQL query

File

File allows you to use a file as a data source. Moreover, the file can be either local or downloaded from a URL.

WARNING

Note that this data source type does not import the file into your database. The specified file will be read every time the table is displayed on the page. This can slow down the opening of the page, especially if dtables needs to read the file from a URL.

File

There are 3 ways to specify the file:

  • Use the WordPress Media library.
  • If the file was uploaded to your server in some other way, such as via FTP, you can specify the Local path to the file on your server.
  • Or you can specify a Custom URL to read a remote source.

File input

dtables currently only supports csv file type.

TIP

More file types will be added in future versions of dtables.

For a CSV file, you have to specify the field delimiter. The characters , and ; are commonly used. However, you can enter any character in the Field delimiter setting.

Column headers

The Use first row as headers setting indicates that the first row of data contains the column headings.

In this case, the table will be provided with data without the first row. And the first row will be used as a source of the column headers when syncing columns.

First row as headers

WARNING

Since the SQL query always returns a result with the names of the columns in the first row, in this case the setting is always considered enabled and is not shown.

Testing data source

For SQL query and File, you can see what data comes from the data source before syncing columns or reloading the preview.

To do this, you need to click on the Test data source button:

Test data source

A pop-up window will open, into which the data will be loaded, but no more than 10 rows:

Test pop-up

Reloading preview

If you have changed the source data and want to see how it will be displayed in the table, then click on the Reload preview button:

Reload preview

TIP

Note that only the row data in the table is reloaded. The column settings are not changed. To update columns, you need to use column synchronization, which is described in the section below.

Syncing columns

To bring the current set of columns in the table in line with the set that is in the data source, you need to synchronize the columns. You can do this by clicking on the Sync columns button:

Sync columns

WARNING

If the number of columns in the data source is less than there are in the table, the extra columns in the table will be deleted starting from the end.

The new columns will get headings based on the Use first row as headers setting. If it is on, then the values from the first row will be used. If off, then the headers will be a sequence of letters from A to Z.

To update headings in already existing columns, enable option Reset headers of existing columns.

dtables can also Try to guess column types for new columns. Internal tests will be performed for the first ten rows of data, and if the tests are positive, the column will be assigned the appropriate data type.

To update data types in already existing columns, enable option Reset types of existing columns.

Table properties

The Table properties pane contains settings that apply to the entire table. It includes 2 tabs with several sections inside.

Main

On the Main tab, you can specify a Title that will be used when displaying a list of tables in the admin panel.

Main

Modifiers

The Modifiers section contains the basic settings for table appearance:

Modifiers

You can customize:

  • The presence of column headings in the Header and Footer of the table.
  • Whether the table should stretch to the Full width of the container.
  • Whether table cells should be Bordered on all sides, and the padding inside the cells be Narrow.
  • Whether row coloring should be Striped.
  • Whether dtables should Highlight rows on hover.

The Search section allows you to enable text search in the table.

TIP

The search is performed on the original data, not its formatted version.

Search

You can customize:

  • Whether the search box should be the Full width of the container.
  • The Alignment of the search box inside the container.
Sorting

The Sorting section allows you to enable the ability to sort columns in the table.

TIP

In Column properties you can exclude individual columns from sorting.

Sorting

You can customize:

  • Which column is sorted by default: Default sorted column, and in which direction: Default sorting direction.
  • Whether the coloring of the table should be special for the sorted column: Highlight sorted solumn.
Pagination

The Pagination section allows you to display table data not all at once, but paginated.

Pagination

You can customize:

  • Whether the page navigation elements should span the Full width of the container.
  • The Alignment of the page navigation elements inside the container.
  • The number of rows displayed on one page: Rows per page.
Responsive

The Responsive section contains a setting that allows to Show collapsed columns immediately. In this mode, collapsed columns will be expanded and the + and - buttons will not appear.

Responsive

Display

On the Display tab, you can adjust parameters such as color, font, alignment of table contents, etc.

Display

The Header section contains settings for displaying the table header.

Header

You can customize:

  • The Horizontal alignment and Vertical alignment of text in cells.
  • The White space setting that corresponds to the CSS property white-space:
    • Normal corresponds to normal.
    • No wrap to nowrap.
    • Preserved to pre.
    • Pre-wrap to pre-wrap.
    • Pre-line to pre-line.
    • Break spaces to break-spaces.
    • For more information on these values, please follow the linkopen in new window.
  • The Font size, Font weight and Font color.
    • Default for Font size and Font color matches the CSS inherit value.
  • The Background color of cells.
    • Default matches the CSS inherit value.
Body

The Body section contains settings for displaying table rows.

Body

You can customize:

  • The Horizontal alignment and Vertical alignment of text in cells.
  • The White space setting that corresponds to the CSS property white-space:
    • Normal corresponds to normal.
    • No wrap to nowrap.
    • Preserved to pre.
    • Pre-wrap to pre-wrap.
    • Pre-line to pre-line.
    • Break spaces to break-spaces.
    • For more information on these values, please follow the linkopen in new window.
  • The Font size, Font weight and Font color.
    • Default for Font size and Font color matches the CSS inherit value.
  • The Background color of cells.
    • Default matches the CSS inherit value.
  • The Even row background color, Hovered row background color and Hovered even row background color if either Striped or Highlight rows on hover is on.
    • Default matches the CSS inherit value.

The Footer section contains settings for displaying the table footer.

Footer

You can customize:

  • The Horizontal alignment and Vertical alignment of text in cells.
  • The White space setting that corresponds to the CSS property white-space:
    • Normal corresponds to normal.
    • No wrap to nowrap.
    • Preserved to pre.
    • Pre-wrap to pre-wrap.
    • Pre-line to pre-line.
    • Break spaces to break-spaces.
    • For more information on these values, please follow the linkopen in new window.
  • The Font size, Font weight and Font color.
    • Default for Font size and Font color matches the CSS inherit value.
  • The Background color of cells.
    • Default matches the CSS inherit value.
Borders

The Borders section allows you to control the display of borders in the table.

Borders

You can customize:

Sorted column

If Highlight sorted column is on, then you have the ability to set special colors for the sorted column.

Sorted column

You can customize:

  • The Font color and cells Background color.
    • Default matches the CSS inherit value.
  • The Even row background color, Hovered row background color and Hovered even row background color if either Striped or Highlight rows on hover is on.
    • Default matches the CSS inherit value.

Column properties

The Column properties pane allows you to customize the display of a single column. It includes 3 tabs with several sections inside.

Main

On the Main tab, you can specify the Header of the column.

Main

General

The General section allows you to specify some basic appearance settings.

General

You can customize:

  • The Position of the column in the table. If in the source data the column, for example, is the first, then in the output it can be made the last.
  • The Width (%) setting that is a percentage value for the column width relative to the table width. It represents a constraint on the column's width, which the browser will try to satisfyopen in new window.
  • Whether the column is Visible, Searchable and Sortable.
Responsive

The Responsive section allows you to make the table responsive by collapsing or hiding the column on narrow screens.

Responsive

After enabling the setting, you need to specify a Breakpoint for the width of the table container. If the width is less than or equal to the breakpoint, then the Action will be triggered.

TIP

Unlike other legacy systems, dtables uses a modern approach to define a breakpoint based on the size of the container element, not the size of the browser viewport.

This allows you to create tables that change layout based on the available width of their container. This may not always refer to the size of the viewport, but instead refers to where on the page the table is placed.

There are two actions available:

  • Collapse to place the column inside a collapsible row below. That row can be shown and hidden using the + and - buttons. Also, the row can be shown immediately if you enable the corresponding setting.
  • Hide to hide the column completely.

Data

The Data section allows you to specify the type of source data and customize its formatting.

dtables currently supports three Column type options, each of which has its own formatting settings:

Formatting may vary depending on Style, and each column type has a special No formatting style that allows you to display the original data as is without any formatting.

No formatting

Text

The Text column type treats the source data as a plain text.

Text

There are several formatting styles to output the text.

Standard

With the Standard style, the text is displayed as is, but you can additionally specify a Prefix and Suffix that will be displayed before and after the value in each cell.

Standard

Email

The Email style interprets the text as an e-mail address and displays it as a link to send an email to that address.

Email

The Link style interprets the text as a URL and displays it as a link to that URL.

Link

You can configure whether the link should open in a new tab with Open link in new tab.

Image

With the Image style, the text is interpreted as a link to an image, and dtables outputs that image.

Image

You can also specify the desired Image width and Image height.

Number

The Number column type treats the source data as a number.

Number

There are several formatting styles to output the number.

Decimal

The Decimal style is for plain number formatting.

Decimal

You can customize:

  • Notation that can take the following values:
    • Standard for plain number formatting.
    • Scientific returns the order-of-magnitude for formatted number.
    • Engineering returns the exponent of ten when divisible by three.
    • Compact for string representing exponent. There is an additional Compact display setting for this option, which takes either Short or Long.
  • Numbering system.
  • The Sign display setting that determines when to display the sign for the number.
    • Auto for sign display for negative numbers only.
    • Never for never display sign.
    • Always for always display sign.
    • Except zero for sign display for positive and negative numbers, but not zero.
  • Whether to Use grouping separators, such as thousands separators or thousand/lakh/crore separators.
  • The Number of digits setting, which allows you to control the number of decimal places:
    • Default to display decimal places, if they are present in the source data.
    • Integer/Fraction opens the following settings:
      • Minimum integer digits for the minimum number of integer digits to use.
      • Minimum fraction digits for the minimum number of fraction digits to use.
      • Maximum fraction digits for the maximum number of fraction digits to use.
    • Significant opens the following settings:
      • Minimum significant digits for the minimum number of significant digits to use.
      • Maximum significant digits for the maximum number of significant digits to use.
Currency

The Currency style is for currency formatting.

Currency

You can customize:

  • The Currency to use in formatting.
  • The Currency display setting that determines how to display the currency.
    • Symbol to use a localized currency symbol such as .
    • Narrow symbol to use a narrow format symbol ($100 rather than US$100).
    • Code to use the ISO currency code.
    • Name to use a localized currency name such as dollar.
  • In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the Currency sign setting to Accounting.
  • The rest of the settings are the same as those for the Decimal style.
Percent

The Percent style is for percent formatting.

Percent

The settings are the same as those for the Decimal style.

Unit

The Unit style is for unit formatting.

Unit

You can customize:

  • The Unit to use in formatting.
  • The Unit display setting that determines how to display the value.
    • Long (e.g., 16 litres).
    • Short (e.g., 16 l).
    • Narrow (e.g., 16l).
  • The rest of the settings are the same as those for the Decimal style.
Date and time

The Date and time column type treats the source data as a date/time string.

Date and time

There is a huge variety of date and time formats. In order for dtables to correctly recognize the source data, you need to specify its Input format. The following options are available:

  • ISO 8601 for parsing strings generated by a computer for programmatic access. This option accepts complete ISO 8601open in new window formats as well as partial implementations.
  • UNIX timestamp
  • Custom for parsing strings using the given Custom input format.

Accepted Custom input format patterns:

UnitPatternExamples
EraG..GGGAD, BC
GGGGAnno Domini, Before Christ
GGGGGA, B
Calendar yeary44, 1, 1900, 2017, 9999
yo44th, 1st, 1900th, 9999999th
yy44, 01, 00, 17
yyy044, 001, 123, 999
yyyy0044, 0001, 1900, 2017
yyyyy...
Local week-numbering yearY44, 1, 1900, 2017, 9000
Yo44th, 1st, 1900th, 9999999th
YY44, 01, 00, 17
YYY044, 001, 123, 999
YYYY0044, 0001, 1900, 2017
YYYYY...
ISO week-numbering yearR-43, 1, 1900, 2017, 9999, -9999
RR-43, 01, 00, 17
RRR-043, 001, 123, 999, -999
RRRR-0043, 0001, 2017, 9999, -9999
RRRRR...
Extended yearu-43, 1, 1900, 2017, 9999, -999
uu-43, 01, 99, -99
uuu-043, 001, 123, 999, -999
uuuu-0043, 0001, 2017, 9999, -9999
uuuuu...
Quarter (formatting)Q1, 2, 3, 4
Qo1st, 2nd, 3rd, 4th
QQ01, 02, 03, 04
QQQQ1, Q2, Q3, Q4
QQQQ1st quarter, 2nd quarter, ...
QQQQQ1, 2, 3, 4
Quarter (stand-alone)q1, 2, 3, 4
qo1st, 2nd, 3rd, 4th
qq01, 02, 03, 04
qqqQ1, Q2, Q3, Q4
qqqq1st quarter, 2nd quarter, ...
qqqqq1, 2, 3, 4
Month (formatting)M1, 2, ..., 12
Mo1st, 2nd, ..., 12th
MM01, 02, ..., 12
MMMJan, Feb, ..., Dec
MMMMJanuary, February, ..., December
MMMMMJ, F, ..., D
Month (stand-alone)L1, 2, ..., 12
Lo1st, 2nd, ..., 12th
LL01, 02, ..., 12
LLLJan, Feb, ..., Dec
LLLLJanuary, February, ..., December
LLLLLJ, F, ..., D
Local week of yearw1, 2, ..., 53
wo1st, 2nd, ..., 53th
ww01, 02, ..., 53
ISO week of yearI1, 2, ..., 53
Io1st, 2nd, ..., 53th
II01, 02, ..., 53
Day of monthd1, 2, ..., 31
do1st, 2nd, ..., 31st
dd01, 02, ..., 31
Day of yearD1, 2, ..., 365, 366
Do1st, 2nd, ..., 365th, 366th
DD01, 02, ..., 365, 366
DDD001, 002, ..., 365, 366
DDDD...
Day of week (formatting)E..EEEMon, Tue, Wed, ..., Sun
EEEEMonday, Tuesday, ..., Sunday
EEEEEM, T, W, T, F, S, S
EEEEEEMo, Tu, We, Th, Fr, Su, Sa
ISO day of week (formatting)i1, 2, 3, ..., 7
io1st, 2nd, ..., 7th
ii01, 02, ..., 07
iiiMon, Tue, Wed, ..., Sun
iiiiMonday, Tuesday, ..., Sunday
iiiiiM, T, W, T, F, S, S
iiiiiiMo, Tu, We, Th, Fr, Su, Sa
Local day of week (formatting)e2, 3, 4, ..., 1
eo2nd, 3rd, ..., 1st
ee02, 03, ..., 01
eeeMon, Tue, Wed, ..., Sun
eeeeMonday, Tuesday, ..., Sunday
eeeeeM, T, W, T, F, S, S
eeeeeeMo, Tu, We, Th, Fr, Su, Sa
Local day of week (stand-alone)c2, 3, 4, ..., 1
co2nd, 3rd, ..., 1st
cc02, 03, ..., 01
cccMon, Tue, Wed, ..., Sun
ccccMonday, Tuesday, ..., Sunday
cccccM, T, W, T, F, S, S
ccccccMo, Tu, We, Th, Fr, Su, Sa
AM, PMa..aaaAM, PM
aaaaa.m., p.m.
aaaaaa, p
AM, PM, noon, midnightb..bbbAM, PM, noon, midnight
bbbba.m., p.m., noon, midnight
bbbbba, p, n, mi
Flexible day periodB..BBBat night, in the morning, ...
BBBBat night, in the morning, ...
BBBBBat night, in the morning, ...
Hour [1-12]h1, 2, ..., 11, 12
ho1st, 2nd, ..., 11th, 12th
hh01, 02, ..., 11, 12
Hour [0-23]H0, 1, 2, ..., 23
Ho0th, 1st, 2nd, ..., 23rd
HH00, 01, 02, ..., 23
Hour [0-11]K1, 2, ..., 11, 0
Ko1st, 2nd, ..., 11th, 0th
KK01, 02, ..., 11, 00
Hour [1-24]k24, 1, 2, ..., 23
ko24th, 1st, 2nd, ..., 23rd
kk24, 01, 02, ..., 23
Minutem0, 1, ..., 59
mo0th, 1st, ..., 59th
mm00, 01, ..., 59
Seconds0, 1, ..., 59
so0th, 1st, ..., 59th
ss00, 01, ..., 59
Seconds timestampt512969520
tt...
Fraction of secondS0, 1, ..., 9
SS00, 01, ..., 99
SSS000, 0001, ..., 999
SSSS...
Milliseconds timestampT512969520900
TT...
Timezone (ISO-8601 w/ Z)X-08, +0530, Z
XX-0800, +0530, Z
XXX-08:00, +05:30, Z
XXXX-0800, +0530, Z, +123456
XXXXX-08:00, +05:30, Z, +12:34:56
Timezone (ISO-8601 w/o Z)x-08, +0530, +00
xx-0800, +0530, +0000
xxx-08:00, +05:30, +00:00
xxxx-0800, +0530, +0000, +123456
xxxxx-08:00, +05:30, +00:00, +12:34:56
Long localized dateP05/29/1453
PPMay 29, 1453
PPPMay 29th, 1453
PPPPSunday, May 29th, 1453
Long localized timep12:00 AM
pp12:00:00 AM
Combination of date and timePp05/29/1453, 12:00 AM
PPppMay 29, 1453, 12:00:00 AM
PPPppMay 29th, 1453 at ...
PPPPppSunday, May 29th, 1453 at ...

There are several formatting styles to output the date/time.

In all settings, the Default value means that the browser will automatically select the value depending on the current locale.

Standard

The Standard style provides simplified date/time formatting settings for the current locale.

Standard

You can customize:

  • Date formatting style.
  • Time formatting style.
  • Calendar.
  • Numbering system.
Extended

The Extended style provides extended date/time formatting settings.

Extended

You can customize:

  • The representation of the Era.
  • The representation of the Year.
  • The representation of the Month.
  • The representation of the Day.
  • The representation of the Weekday.
  • The representation of the Hour.
  • The representation of the Minute.
  • The representation of the Second.
  • The Fractional second digits setting that determines the number of digits used to represent fractions of a second (any additional digits are truncated).
  • The Time notation setting that determines whether to use 12-hour or 24-hour time.
  • The representation of the Time zone name.
  • Calendar.
  • Numbering system.

Display

On the Display tab, you can override table settings such as colors, font, borders, etc. for the column.

Display

In all settings, the Default value means that the table setting will be applied.

Header

The Header section allows you to override the table Header settings.

Header

Body

The Body section allows you to override the table Body settings.

Body

The Footer section allows you to override the table Footer settings.

Footer

Borders

The Borders section allows you to override the table Borders settings.

Borders

Preview

The Preview pane allows you to view all the changes in the display of the table in real time.

Preview

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