Vue 2 | Table | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <w-stack class="wd-example-preview-table">
                                                            <w-card padding="none" title="Table">
                                                              <w-table :columns="columnsData" :rows="rowsData">
                                                                <template #patientStatus="{ row }">
                                                                  <w-badge :type="row['patientStatus'] === 'Active' ? 'success' : 'neutral'">
                                                                    {{ row['patientStatus'] }}
                                                                  </w-badge>
                                                                </template>
                                                        
                                                                <template #lastVisit="{ row }">
                                                                  <span>{{ formatLastVisit(row['lastVisit']) }}</span>
                                                                </template>
                                                              </w-table>
                                                            </w-card>
                                                          </w-stack>
                                                        </template>
                                                        
                                                        <script>
                                                        const columnsData = [
                                                          {
                                                            title: 'ID',
                                                            key: 'patientNumber',
                                                            width: '1%',
                                                            align: 'right'
                                                          },
                                                          {
                                                            title: 'Name',
                                                            key: 'name'
                                                          },
                                                          {
                                                            title: 'Patient status',
                                                            key: 'patientStatus'
                                                          },
                                                          {
                                                            title: 'Last visit',
                                                            key: 'lastVisit'
                                                          }
                                                        ];
                                                        
                                                        const rowsData = [
                                                          {
                                                            id: 1,
                                                            name: 'William Gasteen',
                                                            patientNumber: 20,
                                                            patientStatus: 'Active',
                                                            lastVisit: '2022/12/01'
                                                          },
                                                          {
                                                            id: 2,
                                                            name: 'Jeffrey Parker',
                                                            patientNumber: 21,
                                                            patientStatus: 'Active',
                                                            lastVisit: '2022/09/12'
                                                          },
                                                          {
                                                            id: 3,
                                                            name: 'Sharon Evans',
                                                            patientNumber: 16,
                                                            patientStatus: 'Active',
                                                            lastVisit: '2023/01/19'
                                                          },
                                                          {
                                                            id: 4,
                                                            name: 'Anna Wright',
                                                            patientNumber: 17,
                                                            patientStatus: 'Active',
                                                            lastVisit: '2023/01/29'
                                                          },
                                                          {
                                                            id: 5,
                                                            name: 'Laura Anderson',
                                                            patientNumber: 22,
                                                            patientStatus: 'Active',
                                                            lastVisit: '2023/01/22'
                                                          },
                                                          {
                                                            id: 6,
                                                            name: 'Melissa Harris',
                                                            patientNumber: 9,
                                                            patientStatus: 'Inactive',
                                                            lastVisit: '2021/12/27'
                                                          },
                                                          {
                                                            id: 7,
                                                            name: 'Ryan Bell',
                                                            patientNumber: 7,
                                                            patientStatus: 'Active',
                                                            lastVisit: '2022/10/09'
                                                          }
                                                        ];
                                                        
                                                        export default {
                                                          data: () => ({
                                                            columnsData,
                                                            rowsData
                                                          }),
                                                          methods: {
                                                            formatLastVisit(dateOriginal) {
                                                              const dateArray = dateOriginal.split('/');
                                                        
                                                              return new Date(
                                                                `${dateArray[0]}-${dateArray[1]}-${dateArray[2]}`
                                                              ).toLocaleDateString('en-GB', {
                                                                year: 'numeric',
                                                                month: 'long',
                                                                day: 'numeric'
                                                              });
                                                            }
                                                          }
                                                        };
                                                        </script>

Name	Description	Type	Default	Values
rows	Maps the rows on the table. This is an array of objects with each object having keys that correspond with the property of each column.	array	[]	[ { selected: boolean}, (...) ]
columns	Maps the columns on the table. This is an array of objects with each object having keys that correspond with the property specified in the object of each row.	array	[]	[ { title: string, key: string, align: string, sortable: string, width: string, minWidth: string, sortDirection: string }, (...) ]
selectable	Defines whether the rows at the table can be selected in bulk.	boolean	false	false, true
loading	Specifies loading state of the table	string		skeleton, spinner
skeleton-rows-number	Specifies the number of rows to be displayed in the skeleton state when there is no data. If the table contains data, this prop will be ignored and all rows will be replaced with skeleton rows.	number	5
translations	Provide values as translated strings	object	{ selectRowLabel: 'Select row', selectAllRowsLabel: 'Select all rows' }
sticky-column	Defines the column that will be sticky. The value can be 'first' or 'last'.	string	none	'none, first, last, both

Name	Description	Type	Default	Values
align	Defines the alignment of the head cell.	string	left	left, right
sortable	Defines if the head cell can be sortable.	boolean	false	false, true
sort-direction	If the head cell is sortable, it shows the proper icon depending on the sort direction specified.	string	null	asc, desc

Name	Description	Type	Default	Values
selected	Defines if the body row is selected or not. To be enabled, the table should set to selectable.	boolean	false	false, true

Name	Description	Type	Default	Values
align	Defines the alignment of the body cell.	string	left	left, right
colspan-td	Defines the colspan of the body cell.	number	1

Name	Description
row
`${column.key}-loading`
column.key

Name	Description
default	Default content slot for table head

Name	Description
default	Default content slot for table head cell content. It is usually used for the column title.

Name	Description
default	Default content slot for table body

Name	Description
default	Default content slot for table body row content

Name	Description
default	Default content slot for table body cell

Name	Description	Type
select-row	Emits the event when we select row	{ "names": [ "Object" ] }
select-all-rows	Emits when we select all rows from checkbox header	{ "names": [ "Object" ] }
sort-column	Emits the event when we sort by column	{ "names": [ "Object" ] }

Name	Description	Type
click	Emits the event when we click on the head cell of the table.	{ "names": [ "Event" ] }

Table

Props

Table

Table Head Cell

Table Body Row

Table Body Cell

Slots

Table

Table Head

Table Head Cell

Table Body

Table Body Row

Table Body Cell

Events

Table

Table Head Cell