Data Table is highly optimized to support a large number of rows, but its good to check “Performance” section below to make the most of it.
Best way to display a Grid is on a desktop so you might want to check that first. Resize the browser window to see sticky columns and the responsiveness.
Basic Usage
Vue Properties
All Vue properties are required.
Vue Property
Description
config
Config object (see “Config Property” below).
columns
Object defining columns (see “Columns Definition” below).
data
Data containing Array of rows to display.
Vue Methods
Vue Method
Description
refresh([Boolean])
If parameter is missing or true then it puts Data Table in refresh mode. If parameter is false then components gets out of refresh mode.
Vue Events
Vue Event
Description
@refresh(Function done)
Triggered when user clicks/taps on “Refresh” button. Call done() when refresh is over.
@selection(Array selection)
Triggered when user selects/deselects a row. Parameter has all selected rows.
@rowclick(Object row)
Triggered when user clicks on a row.
Configuring Data Table
Some things worth mentioning before digging into how to configure Data Table:
Describing below some of the features so it makes configuring more clear.
Data Table Height
Use config.bodyStyle optional property to define the height of your Data Table component. This property of config should contain CSS props and values:
If you want to have a maximum height, specify maxHeight CSS prop
If you want to have a minimum height, specify minHeight CSS prop
If you want to have a fixed height, specify height CSS prop
Making a column sortable
In the columns definition array specify sort: true (and also type) for the Object defining that column.
Formatting a Cell
There are two options to do this: use a formatter method or render cell through a component.
Formatter Method
In the columns definition array specify format() method for the Object defining that column.
Rendering with Component
Sometimes you need to use a Tooltip or some specific component to render the cell. You can define a Vue component through a scoped slot:
The scope property here (named cell) is an Object containing:
Scope Property
Description
row
Object containing the row of the respective cell.
col
Object containing column definition for the respective cell.
data
Cell value.
Slot attribute must have a value of the following form: col-[field_name]. Examples: “col-msg” (for field “msg”), “col-date” (for field “date”).
A field is a property name of a row. Example of Data Table data Vue property (which is an Array of all rows):
Performance
Performance is always important when dealing with a high number of rows. Data Table component is written to be as efficient as possible (with lots of optimizations behind the scenes – it’s one of the fastest data table component out there!), but it’s a good thing to make an idea of what features are the most costly to have. So, in descending order:
Rendering a cell with a component
Rendering a cell with a formatter method. The formatter method must be really quick, so strip out whatever is not needed and avoid making complex computations.
The more rows you are displaying at a time the more time it will take for Data Table to render the cells. It’s a good idea to force pagination when you’re using lots of formatters or rendering with lots of components.
Introduction: My name is Aron Pacocha, I am a happy, tasty, innocent, proud, talented, courageous, magnificent person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.