Just a nice table with excel-like copy/paste functionality

You can play with the component and it's props here: very-cool-table storybook

• Some hotkeys and the selection is buggy in the storybook because of storybook's own keybindings.

Installation

npm i very-cool-table @vueuse/core primevue vue
# optional
npm i primeicons

Setup

Add these to your vue app:

// Provide the PrimeVue plugin to your Vue app
app.use(PrimeVue, {
	/* whatever you like */
});

Optionally add this to your css or main.js/ts:

@import 'very-cool-table/style.css';
@import 'primeicons/primeicons.css';

import 'very-cool-table/style.css';
import 'primeicons/primeicons.css';

Use

Then you can use the <Table> component in your templates:

<script
	setup
	lang="ts"
>
	import { Table } from 'very-cool-table';

	const table = ref({
		'Column 1': ['Row 1', 'Row 2', 'Row 3'],
		'Column 2': ['Row 1', 'Row 2', 'Row 3'],
		'Column 3': ['Row 1', 'Row 2', 'Row 3'],
	});
	// This is also bound to a model because it can be reordered
	// and columns can be added/removed
	const columns = ref(Object.keys(table.value));
</script>

<template>
	<table
		v-model="table"
		v-model:columns="columns"
	/>
</template>

Hotkeys

Some of these are available in the context menu by default.

Columns can also be selected by clicking the header.

• any text/number / double click: edit selected cell (when multiple cells are selected the last one to be selected is edited, this applies to most operations that work on a single cell)
• Enter / ↓: for most cells, move to the next cell below, in multiline cells enter inserts a new line
• Shift + Enter / ↑: move to the previous cell above
• Tab / →: move to the next cell to the right
• Shift + Tab / ←: move to the previous cell to the left
• Ctrl + C: copy selected cells
• Ctrl + V: paste copied cells, pasting can add rows to the table if the pasted data has more rows than the current size and allowAddRows prop is true.
• Ctrl + ←: move column left
• Ctrl + →: move column right
• Ctrl + A: select all cells
• Ctrl + Space: select row
• Ctrl + Shift + Space: select column
• Ctrl + Enter: add row below
• Ctrl + Shift + Enter: add column to the right
• Ctrl + Delete: delete selected rows
• Ctrl + Shift + Delete: delete selected columns
• Shift + (↑ / ↓ / ← / →): extend selection in the direction of the arrow
• Alt + (↑ / ↓ / ← / →): move multi-selection
• Move single selection, jumps to next/previous line/column when at the end of the current line/column:
  • Tab / →
  • Shift + Tab / ←
  • Enter / ↓: Enter doesn't move when editing a multiline cell.
  • Shift + Enter / ↑
• Esc: exit editing or multi-selection mode
• Delete: reset selected cells to their default values
• Alt + R: rename column

Tips

• You can provide Proxy objects for column mapper props (e.g. columnTypes, defaultColumnValues) so you can do more advanced name matching. e.g:

const columnColors = new Proxy(
	{}, // empty target because it's mandatory
	{
		// prop is the column name
		get: (_target, prop) => {
			if (/important/i.test(prop)) {
				return '#ff5577'; // redish
			}
			if (/optional/i.test(prop))) {
				return '#50c0c0'; // very relaxing light green color
			}
			return 'rgb(0 0 0)'; // black
		},
	},
);

• To implement custom cells refer to the various cell components like NumberCell in the source code and use the columnToCellComponentTypeMap prop and overrideTypeToCellComponentTypeMap table prop to add or override types mapped by the columnTypes prop.
  • You can also inject the OPERATIONS_SERVICE, KEY_COLUMN and the SELECTION_SERVICE into your custom cell components to access the table operations and selection features.
  • Cells recieve the following props:
    • colName: the name of the column
    • col: the column index in the columns array
    • row: the row index
    • value: the value of the cell (= table[colName][row])
    • readonly: whether the cell is readonly (from the readonlyColumns prop)
    • editing: whether the cell is selected for editing
    • defaultValue: the default value for the cell (from the defaultColumnValues and defaultColumnValue props)
    • precision: the precision for number cells (from the columnPrecisions and defaultColumnPrecision props)
• The table exposes the above services too so you can control the table programmatically from a parent component through a useTemplateRef or something similar.
• Play with the component in the storybook to see all the props and features available.

Development

PRs and requests are welcome!