vue-customizable-table

A customizable monday.com-style data grid component for Vue 3. Supports table and kanban views, multiple column types, drag-and-drop, undo/redo, activity log, and more. Backend-agnostic: you provide an API adapter.

Installation

npm install vue-customizable-table

Setup

As a plugin (registers <BoardView> globally)

// main.js
import { createApp } from 'vue'
import { VueCustomizableTable } from 'vue-customizable-table'
import 'vue-customizable-table/dist/vue-customizable-table.css'
import App from './App.vue'

createApp(App).use(VueCustomizableTable).mount('#app')

As a local import

import { BoardView } from 'vue-customizable-table'
import 'vue-customizable-table/dist/vue-customizable-table.css'

Basic usage

<template>
  <BoardView :board-id="boardId" :api="api" />
</template>

<script setup>
import { BoardView } from 'vue-customizable-table'
import 'vue-customizable-table/dist/vue-customizable-table.css'
import myApi from './myApi'

const boardId = 'my-board-id'
const api = myApi
</script>

The api adapter

BoardView is backend-agnostic. You connect it to your own backend by passing an api object. This object must implement the following methods:

const api = {
  // Load the full board state (called on mount)
  async getBoard(boardId) {
    // Must return: { board, columns, groups, rows, preferences }
  },

  // Columns
  async createColumn(boardId, title, type, width, settings) {},
  async updateColumn(columnId, updates) {},
  async deleteColumn(columnId) {},
  async reorderColumns(ids) {},    // ids: string[] in new order

  // Groups
  async createGroup(boardId, title, color) {},
  async updateGroup(groupId, updates) {},
  async deleteGroup(groupId) {},
  async reorderGroups(ids) {},

  // Rows
  async createRow(groupId, values) {},
  async updateRow(rowId, updates) {},
  async deleteRow(rowId) {},
  async reorderRows(ids) {},
  async moveRowToGroup(rowId, groupId) {},

  // Preferences (column visibility)
  async updatePreferences(boardId, updates) {},

  // Activity log (only required when enableActivityLog is true)
  async logActivity(boardId, action, entityType, entityId, description, details) {},
  async getActivity(boardId, limit) {},  // Returns: ActivityEntry[]
}

See playground/api.js for a complete reference implementation using REST/axios.

Expected data shapes

// getBoard() must return:
{
  board:       { id, name, description, created_at },
  columns:     Column[],
  groups:      Group[],
  rows:        Row[],
  preferences: { board_id, hidden_columns: string[] }
}

// Column
{ id, board_id, title, type, width, order_index, is_visible, settings }
// settings.options[] is required for status, priority, and dropdown columns:
// { value: string, label: string, color: string }

// Group
{ id, board_id, title, color, order_index, is_collapsed }

// Row
{ id, group_id, order_index, values: { [columnId]: any } }

// ActivityEntry
{ id, action, entity_type, entity_id, description, details, timestamp }

Column types

| Type | Value stored | Notes | |---|---|---| | text | string | Plain text input | | number | number | Supports prefix and suffix in settings | | status | string (option value) | Requires settings.options | | priority | string (option value) | Requires settings.options | | dropdown | string (option value) | Requires settings.options | | date | string (YYYY-MM-DD) | Date picker | | person | { name: string }[] | Multiple assignees | | checkbox | boolean | | | progress | number (0–100) | Visual progress bar | | timeline | { start: string, end: string } | Date range | | file | string (filename or URL) | |

Props

BoardView

| Prop | Type | Default | Description | |---|---|---|---| | boardId | String | required | ID passed to api.getBoard() | | api | Object | required | API adapter (see above) | | enableEditing | Boolean | true | Master toggle for all write operations | | enableKanban | Boolean | true | Show the table/kanban view switcher | | enableSearch | Boolean | true | Search box in the toolbar | | enableFilter | Boolean | true | Per-column filter in the toolbar | | enableSort | Boolean | true | Column sort in the toolbar | | enableHideColumns | Boolean | true | Column visibility toggle | | enableAddColumn | Boolean | true | "New column" button | | enableAddGroup | Boolean | true | "New group" button | | enableDragRows | Boolean | true | Drag rows within and across groups | | enableDragColumns | Boolean | true | Drag column headers to reorder | | enableColumnResize | Boolean | true | Drag column edges to resize | | enableKeyboardNav | Boolean | true | Arrow key / Tab navigation across cells | | enableUndoRedo | Boolean | true | Undo/redo buttons and Ctrl+Z / Ctrl+Y | | enableExport | Boolean | true | Export to Excel (.xlsx) | | enableActivityLog | Boolean | true | Activity log panel (requires api.getActivity) | | readonlyColumns | String[] | [] | Column IDs that cannot be edited |

Read-only mode example

<BoardView
  :board-id="boardId"
  :api="api"
  :enable-editing="false"
  :enable-add-column="false"
  :enable-add-group="false"
/>

Partial editing example

<!-- Only the "name" column is editable -->
<BoardView
  :board-id="boardId"
  :api="api"
  :readonly-columns="['col-status', 'col-assignee', 'col-due-date']"
/>

Disabling features

All feature props default to true. Set any to false to remove it from the UI:

<BoardView
  :board-id="boardId"
  :api="api"
  :enable-kanban="false"
  :enable-activity-log="false"
  :enable-export="false"
  :enable-undo-redo="false"
/>

Keyboard shortcuts

| Key | Action | |---|---| | Arrow keys | Navigate between cells | | Tab / Shift+Tab | Move to next / previous cell | | Ctrl+Z | Undo last action | | Ctrl+Y / Ctrl+Shift+Z | Redo | | Escape | Deselect current cell |

Development

# Clone and install
git clone <repo>
npm install

# Start dev server (playground at localhost:3002)
npm run dev

# Build library for publishing
npm run build:lib

License

MIT