Table

Display your data in a fully responsive and customizable table

For cases when you need to show your data in tabular form, you have two separate components which you can use <bdn-table> and <bdn-table-simple>. The latter has limited options and should be used when you only need to show simple data list, without slots, sorting, filtering or such more advanced functions.

Table component provides its own styles that match the rest of the components.

Displaying data

For this component to work, you need to provide an array of objects in data prop, and that could be enough in some cases. Table component will query the first object in that array and keys of that object will become columns. Of course, keys in other objects should match.

Object keys displayed as column names will be humanized before being displayed in a table – for example: first_name and firstName will both become First Name.

If you provide an empty array, table component will display message “No data”.

Columns definition

For better control of columns, their sizing and ability to add classes and slots, you should define them as a separate array of object and pass it to columns prop.

Take a look at the following example:

Here’s the list of available field definitions:

Name	Description
key	A value that is matched against the keys in objects in array passed to data prop
label	A text to be displayed in the table head cell for column
colClass	A CSS class to be applied to the whole column. You can add multiple classes separated by space, just how you would add them to class attribute.
headClass	A CSS class to be applied only to the head cell for column. You can add multiple classes separated by space, just how you would add them to class attribute.
slot	A name for slot that you can use to attach a named slot for that column
width	Width of the column. You need to write the units for this. If you want column width to match content, use some small unit, like 2px
formatter	A function that can be used to format data in column (for example, date and time)

Formatting data

You can pass a function in formatter property to transform the shown data in cells for certain columns. Take a look at example below to better understand how it works:

Styling rows

In addition to colClass used in column definition array, you can use _rowClass to add CSS classes (underscore is necessary so we don’t confuse this property with actual cell data).

Using slots to add content

In some cases using formatter function cannot get you the results you want – for example, when you need to add something other than text in column cells or perform some actions based on data in other cells. In that case, you can use named slots to add custom content in cells.

You need to add slot property in your column definitions and then use that name in v-slot syntax in your table component.

In example below, tableData object will contain row data, column data and indexes for both row and column so you can always have access to any of those. That object can look like this:

{
  "rowData": {
    "first_name": "Floor",
    "last_name": "Jansen",
    "age": 39,
    "sex": "Female",
    "band": "Nightwish"
  },
  "colData": [],
  "rowIndex": 5,
  "colIndex": 5
}

Header slot

If you need more control over what's shown in your header cells, you can use the headerSlot option when defining your columns. For now, you cannot access any data from the table in headerSlot, like you can do in cell slots. This might be changed later.

Selecting rows

Currently, table component supports only row selection.

To enable this, you need to add prop selectable to your instance of table component, which will enable single rows to be selectable.

To enable multiple rows selection, add multi-select prop and then you can select multiple rows by holding Shift or Control on keyboard.

On row selection, a custom event selected will be emitted, so you can listen for this event that will be carrying the data of selected rows. The data emitted will be an object with arrays selectedRows and selectedRowsIndexes.

Clicking again on the selected row will deselect it.

Below are the examples of single and multi-select tables.

Single select

Multi select

Click events

Table component supports single and double clicks on rows – just add @click or @dblclick to your table component in template.

Note

Due to the default behavior or browsers and HTML, double clicking on text will select it. Because this doesn’t look good when you have double click event on table, text selection will be turned off if there is a dblclick listener on table component.

Also, please note that if you have both @dblclick and @click events on component, click event will be delayed for about 300ms. This is due to the fact that if there is no delay, both events would be emitted at the same time, as you cannot really distinguish double click from click in Javascript.

Find examples of click and double click in a row in examples below.

The click events will emit data in following structure:

{
  "rowData": {
    "first_name": "James",
    "last_name": "Hetfield",
    "age": 57,
    "sex": "Male",
    "band": "Metallica"
  },
  "colData": [
    "Metallica",
    "Solo",
    "Alter Bridge",
    "Solo",
    "Foo Fighters",
    "Nightwish"
  ],
  "rowIndex": 0,
  "colIndex": 4,
  "cellData": "Metallica"
}

Pagination

There are two types of internal pagination available – continuous and with pages. You can define type in pagination-type prop.

When using the continuous pagination, you can set the number of rows to be loaded every time you click the “Load more” button with prop rows-to-load. If not defined, it will load the number of rows displayed in rows-per-page prop. To load all of the remaining data, use rows-to-load="all".

See examples below.

Events reference

Event name	Description
click	Fired when you click on the row
dblclick	Fired when double click is detected on a row
selected	Fired when a row is selected
load-more	Fired when load more button is clicked in continuous pagination mode

Props reference

Property	Type	Default	Accepts	Description
data	Array	[]	Array	An array of object that will be displayed as rows in table
columns	Array	[]	Array	An array of objects that is used to format and control the columns in table
striped	Boolean	true	true/false	Determines the styling of the table. If true, every other row in table will have slightly different background color.
hover	Boolean	true	true/false	If true, rows will change color when hovered.
transparent	Boolean	false	true/false	Determines if the table has background color.
bordered	Boolean	false	true/false	By default, table has borders only between rows. If this is set to true, table will display all borders.
loading	Boolean	false	true/false	Used when you need to load the data asynchronously in table, when set to true it will hide all rows and display loading animation.
header-hidden	Boolean	false	true/false	If true, it will hide the header with column names
styles	Object	{}	Object with headerClass and footerClass properties	An object containing headerClass and/or footerClass properties with string of classes as value that will be applied to header and footer of the table
selectable	Boolean	false	true/false	Determines if the table rows are selectable
multi-select	Boolean	false	true/false	Determines if the multiple table rows are selectable
pagination-type	String	Empty	page/continuous	Determines the pagination type
rows-per-page	Number/Array	null	Any number greater than 0 or array of numbers	Determines how many rows should be displayed per page when pagination is on. If array of numbers is provided, table component will show a dropdown with available pages per page.
rows-to-load	Number/String	null	Number greater than 0, or ‘all’	In continuous pagination type, it determines how many rows should load when Load more button is clicked. If you want to load all remaining entries, use ‘all’ as a value for this prop.
row-count-text	String	‘Showing’	String	Used if you need to translate string of how many rows are currently displayed.
load-more-text	String	‘Load more’	String	A text for the load more button in continuous pagination type.