> For the complete documentation index, see [llms.txt](https://docs.dashboardjs.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashboardjs.net/getting-started.md).
# Getting Started
## DashboardJS
\
[DashboardJS](https://www.dashboardjs.net) ([www.dashboardjs.net](http://www.dashboardjs.net)) is a free, modular, responsive, open source Dashboard / Record List component to display records in a sleek and modern way, built entirely in vanilla Js, with zero dependancies. You can have different tabs that show different recordsets complete with pagination, sorting, filtering, and you can switch views for each recordset between Card view, and List view, and each record, field and action come with a multitude of events that you can hook onto to process data and change behaviour.
DashboardJS in Card View Mode
DashboardJS is fully themeable, all you need is knowledge of HTML & CSS.
DashboardJS works either Synchronously (full data loaded and fed into the Dashboard component before initiation), or Asnychronously (Dashboard loads page by page through Fetch API).
Download: [DashboardJS.zip](https://github.com/hishamfangs/DashboardJS/tree/main/dist/DashboardJS.zip)\
Website:[ https://www.dashboardjs.net](https://www.dashboardjs.net)
### Setting up
This is the basic HTML to load the dashboard
```html
My Dashboard
```
### Simplest Example:
```
load-dashboard.js:
```
```javascript
var dashboard = new FutureLabs.Dashboard({
data: [{
"Name": "Jessie Bambergans",
"Status": "Married",
"Date": "1980-08-10",
"Gender": "Female"
},{
"Name": "Jerome Berner",
"Status": "Single",
"Date": "1980-08-10",
"Gender": "Male"
},{
"Name": "Ruba Jackman",
"Status": "Married",
"Date": "1984-01-05",
"Gender": "Female"
}],
templateURL: './dashboardjs/dashboard.html',
appendTo: document.querySelector(".dashboard-container")
});
```
### Adding tabs, fields and actions
Everything past the raw data is optional. Add `config` when you want to rename a field, change how a value is displayed, or attach behaviour.
```javascript
var dashboard = new FutureLabs.Dashboard({
config: {
tabs: {
'User Profiles': {
icon: 'far fa-user',
description: 'A list of all approved users',
viewMode: 'Cards', // 'Cards' or 'List'
itemsPerPage: 12,
recordSettings: {
image: { url: 'imageURL', height: '200px' },
fields: {
Date: { name: 'Date of Birth', dataType: 'Date', width: '100px' },
Name: { name: 'Name', position: 'left' },
Status: {
name: 'Marital Status',
position: 'right',
// Whatever you return here is displayed. HTML is allowed.
value: ({ value, record }) =>
record.Gender === 'Female' && value === 'Married'
? '' + value + ''
: value
},
Gender: {
name: 'Gender',
position: 'right',
icon: ({ value }) => value === 'Female' ? 'fas fa-venus' : 'fas fa-mars'
}
},
actionsType: 'menu', // 'buttons' (default) or 'menu'
actions: {
'More details...': { icon: 'info-icon', onClick: ({ record }) => showDetails(record) },
'Pay': {
icon: 'pay-icon',
// 'disable' greys the button out rather than removing it
visibility: ({ record }) => record.Balance > 0 ? 'show' : 'disable',
onClick: ({ record }) => startPayment(record.InvoiceId)
},
'Delete': {
icon: 'cancel-icon',
// Nothing is removed unless this returns something other than false
onBeforeRemove: ({ record }) => confirm('Remove ' + record.Name + '?')
}
}
}
}
}
},
data: data,
templateURL: 'dashboardjs/dashboard.html',
appendTo: '.dashboard-container'
});
```
### Where to go next
The config object nests the same way the UI does:
| Page | Covers |
| ------------------------------------------------------------------- | -------------------------------------------------------------- |
| [Config](/configuration-options/config.md) | Top-level options, profile, and a full two-tab example |
| [Tabs](/configuration-options/config/tabs.md) | One entry per recordset — icon, description, view mode, paging |
| [Record Settings](/configuration-options/config/record-settings.md) | Images, field layout, and record-level events |
| [Fields](/configuration-options/config/fields.md) | Columns — naming, formatting, linking, visibility |
| [Actions](/configuration-options/config/actions.md) | Per-record buttons and menus |
| [Callbacks](/configuration-options/config/callbacks.md) | How every function in the config is called |
Any of `value`, `icon`, `url`, `visibility`, `class`, `style` and `width` may be a function instead of a static value, and every component accepts `onClick`, `onRender`, `onMount` and `onBeforeRemove`. Every one of them receives a single context object — destructure the keys you need:
```javascript
value: ({ value, record }) => record.Gender === 'Female' ? value.toUpperCase() : value,
onClick: ({ record, event }) => { event.stopPropagation(); open(record.Id); }
```
See [Callbacks](/configuration-options/config/callbacks.md) for every context key and what each hook returns.