One of most common use cases of wpDataTables is a possibility to create tables and fill these with data completely from WordPress admin panel, without having any pre-existing data source (Excel, CSV, Google Spreadsheet, MySQL DB or anything else). The created table will be stored in MySQL, and you will be able to edit it at an any later point, or make editable from the front-end.
Let’s go through the table creation process together, and we will explain all options along the way.
To start creating a table manually, you need to open your WordPress admin panel, go to wpDataTables -> Create a Table, choose the second option “Create a table manually” and click “Next“:
You will see the wizard step that helps you to create table structure (note: if you at any step noticed that you made a mistake you can just click “Previous” and go back):
Let’s go through all elements in detail:
- Table name input – here you can define a table name that will help you to identify this table among other wpDataTables. Can be redefined at any time later.
- Number of columns input – here you can provide the number of columns that your table will have (e.g. just put 10 if you plan to have 10 columns). Another option to change the column numbers is to just add them with a + button (element #9) or remove with X button (element #8). You can add or remove columns later when the table is already created.
- Column block – such blocks represent columns of your future table; one block stands for one column.
- Column header – in this input you can define the header that will be identify the column and be visible in the frontend.
- Column type – this input helps you to define with only one selection the data type of the column, filter type for this column, and the editor input type.
- Editor predefined value. This is an optional input, here you can define a default value of the column which will be pre-filled in the editor inputs, and in the filter inputs (this can be disabled). If the column type is One-line selectbox, or Multi-line selectbox, and some possible values are defined (see point #7), this input will become a dropdown of the possible values.
- Possible values. This is a “taggable” input, which appears only for One-line selectbox and Multi-line selectbox types. Here you can define all the possible values, separating them with a comma.
- “X” / Remove column block button. This button quickly removes a column block. Might be more convenient then changing the column number with an input.
- Add column button. This button quickly adds one more column block.
- Create the table. This is basically a dropdown button with options to choose editor type. After you choose one it creates the table on MySQL side, creates a wpDataTable and opens a chosen editor, where you can start editing the table data.
Column type options:
- One-line string. This is the most “simple” text type, suitable for short strings, the generated column will have a “string” (“text”) data type, one-line text input filter type, and one-line text input editor input type in the editor.
- Multi-line string. This is another option for a text type, suitable for longer strings, the generated column will have a string data type, one-line text input filter type, and multi-line editor (“memo”) input type.
- One-line selectbox. This is an option for columns, where cells can have one of several possible options as a value at a time (e.g. colors: “red”, “green”, “blue”). The generated column will have a string data type, a select box filter, a select box editor input.
- Multi-line selectbox. This is an option for columns, where cells can have several of possible options as a value at a time (e.g. purchased modules: module 1, module 2, module 3). The generated columns will have a string data type, a select box filter, a multi-selectbox editor input.
- Integer. This is an option for integer numeric columns. The generated column will have an integer data type, a number filter, and a text/numeric editor input.
- Float. This is an option for float numeric columns. The generated column will have a float data type, a number filter, and a masked text/numeric editor input.
- Date. This is an option for date columns. The generated columns will have a date data type, a date range filter, and a datepicker editor input.
- DateTime. An option for DateTime columns, when not only the date, but also the time of day is necessary. The column will have a DateTime data type, DateTime range filter, and a DateTime editor input.
- Time. An option for having the plain Time or day stored in column in 12h or 24h format. The column sill have a Time data type, Time range filter and a Time editor input.
- URL link. This is an option for URL link columns. The generated columns will have an URL link data type, a text filter, and a text editor input with URL validation.
- E-mail link. This is an option for E-mail columns. The generated columns will have an e-mail link data type, a text filter and a text editor input type with E-mail address validation.
- Image. This is an option for image columns. The generated columns will have an Image data type, no filter, and a text editor input.
- Attachment. This is an option for attachment columns. The generated columns will have a “URL link data type”, no filter, an a “Browse media library” input to attach files.
Let’s configure an example table and fill it in with some data.
We use this configuration for columns (a dummy clients table):
- Company name, type: one-line string
- Sector, type: one-line selectbox, possible values: “Architecture, Business Consulting, Construction, Technology, IT”
- Yearly revenue, type: float
- Client since, type: date
When you are finished with configuring the table, click “Create the table” and dropdown will open with options to choose to open table in standard editor or Excel-like editor.
When you filled in some values in the table, the procedure of inserting it in your post or page is simple. Open (or create new) post or page, place the cursor in the position where you would like to insert the table, click the “Insert a wpDataTable” button in the editor, and locate the table that you just created.
Other option is to copy&paste the table shortcode manually (you can see it in the back-end editor).
That’s it! Not so complicated, is it?