<script>
import Grid from '$lib/components/grid/Grid.svelte';
let columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'E-mail', type: 'email', sortable: true }
];
let rows = [
{ name: 'Paul McCartney', email: '[email protected]' },
{ name: 'Tommy Hilfinger', email: '[email protected]' },
{ name: 'Ayrton Senna', email: '[email protected]' },
{ name: 'Steven Spielberg', email: '[email protected]' },
{ name: 'Martin Scorsese', email: '[email protected]' },
{ name: 'Silvo Santos', email: '[email protected]' }
];
let actions = [
{
label: 'Edit',
color: 'warning',
callback: (row) => {
alert(row.name);
}
},
{
label: 'Delete',
color: 'danger',
callback: (row) => {
alert(row.name);
}
},
{
label: 'View',
color: 'info',
callback: (row) => {
alert(row.name);
}
}
];
</script>
<Grid {columns} {rows} {actions} itemsPerPage="4" />
You can simply remove the rows
option and place the server
option instead.
<script>
import Grid from '$lib/components/grid/Grid.svelte';
let server = 'https://my-data-endpoint.test';
let columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'E-mail', type: 'email', sortable: true }
];
let actions = [
{
label: 'Edit',
color: 'warning',
callback: (row) => {
alert(row.name);
}
},
{
label: 'Delete',
color: 'danger',
callback: (row) => {
alert(row.name);
}
},
{
label: 'View',
color: 'info',
callback: (row) => {
alert(row.name);
}
}
];
</script>
<Grid {columns} {server} {actions} itemsPerPage="4" />
Your server must be ready to deal with the incoming request. The following is an example of how you could implement such functionality in Nodejs:
import http from 'http';
import url from 'url';
import { loadPageRows, splitRowsIntoPages, countRows, pageCount } from './utils.js';
// You should retrieve the data from your database or somewhere else
const data = [
{ name: 'Paul McCartney', email: '[email protected]' },
{ name: 'Tommy Hilfinger', email: '[email protected]' },
{ name: 'Ayrton Senna', email: '[email protected]' },
{ name: 'Steven Spielberg', email: '[email protected]' },
{ name: 'Martin Scorsese', email: '[email protected]' },
{ name: 'Silvo Santos', email: '[email protected]' }
];
const requestListener = function (req, res) {
let query = url.parse(req.url, true).query;
let rows = loadPageRows(splitRowsIntoPages(data, query.itemsPerPage), query.page);
let pageNum = query.page;
let totalPages = pageCount(data, query.itemsPerPage);
let totalRows = countRows(data);
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(
JSON.stringify({
pageNum: pageNum,
rows: rows,
totalPages: totalPages,
totalRows: totalRows
})
);
};
const server = http.createServer(requestListener);
server.listen(5000);
Columns must be an array of objects that define the structure of your table.
Available properties
Rows is required only if you are not fetching remote data from your server through the server
option.
Server is required only if you are not passing the rows
option.
Total rows that should be shown per page. The default value is 10
.