Project Tasks: Local Data Example

What this page does

This project task grid receives its rows from a JavaScript array already in the browser. vGrid performs sorting, filtering, and pagination locally; no API request is made.

The grid

Source

Pass the array through the data option and define the fields to display in columns.

const tasks = [
  { id: 1, task: "Prepare launch notes", owner: 'Maya', status: "In progress" },
  { id: 2, task: "Review accessibility", owner: 'Owen', status: "To do" },
  { id: 3, task: "Publish release", owner: 'Lina', status: "Done" },
  { id: 4, task: "Update screenshots", owner: 'Maya', status: "In progress" },
  { id: 5, task: "Confirm analytics", owner: 'Owen', status: "To do" },
  { id: 6, task: "Archive old drafts", owner: 'Lina', status: "Done" },
  { id: 7, task: "Plan next sprint", owner: 'Maya', status: "To do" },
  { id: 8, task: "Test mobile layout", owner: 'Owen', status: "In progress" },
  { id: 9, task: "Write release summary", owner: 'Lina', status: "To do" },
  { id: 10, task: "Check error reports", owner: 'Maya', status: "Done" },
  { id: 11, task: "Review API limits", owner: 'Owen', status: "To do" },
  { id: 12, task: "Organize research notes", owner: 'Lina', status: "In progress" },
  { id: 13, task: "Approve final copy", owner: 'Maya', status: "To do" },
  { id: 14, task: "Prepare demo account", owner: 'Owen', status: "Done" },
  { id: 15, task: "Schedule user interviews", owner: 'Lina', status: "In progress" },
  { id: 16, task: "Update task board", owner: 'Maya', status: "Done" },
  { id: 17, task: "Share sprint agenda", owner: 'Owen', status: "To do" },
];

vGrid({
  el: '#local-grid',
  caption: "Project Tasks",
  data: tasks,
  columns: [
    { name: 'task', label: "Task" },
    { name: 'owner', label: "Owner" },
    { name: 'status', label: "Status", filterType: 'select', filterOptions: ":All;To do:To do;In progress:In progress;Done:Done" },
  ],
  actions: {
    clear: { active: true, symbol: '\u2715', title: "Clear filters" },
    download: { active: true, symbol: '\u2913', title: "Download" },
    print: { active: true, symbol: '\u2912', title: "Print" },
    refresh: { active: true, symbol: '\u21BB', title: "Refresh" },
    settings: { active: true, html: '\u2699\uFE0E', title: "Settings" },
  },
  rowsPerPage: 3,
});