Tareas del proyecto: ejemplo de datos locales

Qué hace esta página

Esta cuadrícula de tareas recibe sus filas de una matriz de JavaScript que ya está en el navegador. vGrid ordena, filtra y pagina los datos localmente; no se realiza ninguna solicitud a la API.

La cuadrícula

Código fuente

Pase la matriz mediante la opción data opción y defina los campos que se mostrarán en columns.

const tasks = [
  { id: 1, task: "Preparar las notas del lanzamiento", owner: 'Maya', status: "En curso" },
  { id: 2, task: "Revisar la accesibilidad", owner: 'Owen', status: "Pendiente" },
  { id: 3, task: "Publicar la versi\u00f3n", owner: 'Lina', status: "Hecho" },
  { id: 4, task: "Actualizar las capturas de pantalla", owner: 'Maya', status: "En curso" },
  { id: 5, task: "Confirmar las anal\u00edticas", owner: 'Owen', status: "Pendiente" },
  { id: 6, task: "Archivar los borradores antiguos", owner: 'Lina', status: "Hecho" },
  { id: 7, task: "Planificar el pr\u00f3ximo sprint", owner: 'Maya', status: "Pendiente" },
  { id: 8, task: "Probar el dise\u00f1o para m\u00f3viles", owner: 'Owen', status: "En curso" },
  { id: 9, task: "Escribir el resumen de la versi\u00f3n", owner: 'Lina', status: "Pendiente" },
  { id: 10, task: "Revisar los informes de errores", owner: 'Maya', status: "Hecho" },
  { id: 11, task: "Revisar los l\u00edmites de la API", owner: 'Owen', status: "Pendiente" },
  { id: 12, task: "Organizar las notas de investigaci\u00f3n", owner: 'Lina', status: "En curso" },
  { id: 13, task: "Aprobar el texto final", owner: 'Maya', status: "Pendiente" },
  { id: 14, task: "Preparar la cuenta de demostraci\u00f3n", owner: 'Owen', status: "Hecho" },
  { id: 15, task: "Programar entrevistas con usuarios", owner: 'Lina', status: "En curso" },
  { id: 16, task: "Actualizar el tablero de tareas", owner: 'Maya', status: "Hecho" },
  { id: 17, task: "Compartir la agenda del sprint", owner: 'Owen', status: "Pendiente" },
];

vGrid({
  el: '#local-grid',
  caption: "Tareas del proyecto",
  data: tasks,
  columns: [
    { name: 'task', label: "Tarea" },
    { name: 'owner', label: "Responsable" },
    { name: 'status', label: "Estado", filterType: 'select', filterOptions: ":Todas;Pendiente:Pendiente;En curso:En curso;Hecho:Hecho" },
  ],
  actions: {
    clear: { active: true, symbol: '\u2715', title: "Borrar filtros" },
    download: { active: true, symbol: '\u2913', title: "Descargar" },
    print: { active: true, symbol: '\u2912', title: "Imprimir" },
    refresh: { active: true, symbol: '\u21BB', title: "Actualizar" },
    settings: { active: true, html: '\u2699\uFE0E', title: "Configuraci\u00f3n" },
  },
  rowsPerPage: 3,
});