tessl/npm-handsontable--vue
Official Vue 2 wrapper for Handsontable data grid with spreadsheet-like features.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
hot-column.mddocs/
Column Configuration (HotColumn)
The HotColumn component provides declarative column configuration for HotTable, allowing you to define column-specific settings, types, renderers, and editors directly in the template. It's a configuration-only component that doesn't render visual elements.
Capabilities
Component Definition
Configuration component for defining individual column settings within HotTable.
/**
* Column configuration component for defining column-specific settings
* Must be used as child of HotTable component
* All Handsontable column settings available as props
*/
interface HotColumn extends Vue {
// Column identification and data binding
title?: string;
data?: string | number | Function;
// Column appearance
width?: number;
type?: 'text' | 'numeric' | 'date' | 'checkbox' | 'dropdown' | 'autocomplete' | 'password' | 'handsontable' | 'time';
// Data validation and formatting
validator?: string | Function | RegExp;
allowInvalid?: boolean;
source?: any[] | Function;
strict?: boolean;
// Cell behavior
readOnly?: boolean;
renderer?: string | Function;
editor?: string | Function | boolean;
// Sorting and filtering
sortable?: boolean;
// Column-specific settings
className?: string;
columnSorting?: boolean | object;
// All other Handsontable column settings available
[key: string]: any;
}Column Settings Creation
Method for processing props and child components into column configuration.
/**
* Create column settings from component props and child renderer/editor components
* Called automatically during component mounting
*/
createColumnSettings(): void;Column Data Configuration
Configure how column data is accessed and bound.
/**
* Column data binding options
*/
interface ColumnDataConfig {
/** Property name for object-based data or column index for array data */
data?: string | number | Function;
/** Column header title */
title?: string;
/** Default value for empty cells */
defaultValue?: any;
}Usage Examples:
<template>
<hot-table :data="tableData">
<!-- Simple column with property binding -->
<hot-column title="Name" data="name" width="150" />
<!-- Column with index-based data access -->
<hot-column title="Age" :data="1" type="numeric" width="80" />
<!-- Column with function-based data access -->
<hot-column
title="Full Name"
:data="getFullName"
:read-only="true"
/>
</hot-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', lastName: 'Doe', age: 30 },
{ name: 'Jane', lastName: 'Smith', age: 25 }
]
};
},
methods: {
getFullName(row, col) {
const rowData = this.tableData[row];
return `${rowData.name} ${rowData.lastName}`;
}
}
}
</script>Column Types and Validation
Configure column data types and validation rules.
/**
* Column type and validation configuration
*/
interface ColumnTypeConfig {
/** Cell type affecting editor and renderer behavior */
type?: 'text' | 'numeric' | 'date' | 'checkbox' | 'dropdown' | 'autocomplete' | 'password' | 'handsontable' | 'time';
/** Data validation function or pattern */
validator?: string | Function | RegExp;
/** Allow invalid data to be entered */
allowInvalid?: boolean;
/** Data source for dropdown/autocomplete types */
source?: any[] | Function;
/** Strict validation for dropdown values */
strict?: boolean;
/** Number format for numeric columns */
numericFormat?: {
pattern: string;
culture?: string;
};
/** Date format for date columns */
dateFormat?: string;
/** Time format for time columns */
timeFormat?: string;
/** Checkbox values for checkbox columns */
checkedTemplate?: any;
uncheckedTemplate?: any;
}Usage Examples:
<template>
<hot-table :data="products">
<!-- Numeric column with validation -->
<hot-column
title="Price"
data="price"
type="numeric"
:validator="priceValidator"
:numeric-format="{ pattern: '0,0.00' }"
/>
<!-- Dropdown column with strict validation -->
<hot-column
title="Category"
data="category"
type="dropdown"
:source="categories"
:strict="true"
/>
<!-- Date column with custom format -->
<hot-column
title="Launch Date"
data="launchDate"
type="date"
date-format="YYYY-MM-DD"
/>
<!-- Checkbox column with custom values -->
<hot-column
title="Active"
data="active"
type="checkbox"
:checked-template="1"
:unchecked-template="0"
/>
</hot-table>
</template>
<script>
export default {
data() {
return {
categories: ['Electronics', 'Clothing', 'Books'],
products: [
{ name: 'Laptop', price: 999.99, category: 'Electronics', active: 1 }
]
};
},
methods: {
priceValidator(value) {
return parseFloat(value) > 0;
}
}
}
</script>Custom Renderers and Editors
Configure custom Vue components as cell renderers and editors.
/**
* Custom renderer and editor configuration
*/
interface ColumnCustomConfig {
/** Custom renderer function or component */
renderer?: string | Function;
/** Custom editor function, component, or false to disable editing */
editor?: string | Function | boolean;
/** CSS class name for column cells */
className?: string;
}Usage Examples:
<template>
<hot-table :data="tableData">
<!-- Column with custom Vue renderer -->
<hot-column title="Status" data="status" width="120">
<status-renderer hot-renderer></status-renderer>
</hot-column>
<!-- Column with custom Vue editor -->
<hot-column title="Notes" data="notes" width="200">
<rich-text-editor hot-editor></rich-text-editor>
</hot-column>
<!-- Read-only column with custom styling -->
<hot-column
title="ID"
data="id"
:read-only="true"
class-name="id-column"
/>
<!-- Column with disabled editing -->
<hot-column
title="Calculated"
data="calculated"
:editor="false"
/>
</hot-table>
</template>
<script>
import StatusRenderer from './StatusRenderer.vue';
import RichTextEditor from './RichTextEditor.vue';
export default {
components: {
StatusRenderer,
RichTextEditor
}
}
</script>Column Behavior Configuration
Configure column-specific behavior and interactions.
/**
* Column behavior configuration
*/
interface ColumnBehaviorConfig {
/** Make column read-only */
readOnly?: boolean;
/** Enable sorting for this column */
sortable?: boolean;
/** Column-specific sorting configuration */
columnSorting?: boolean | {
indicator?: boolean;
headerAction?: boolean;
sortEmptyCells?: boolean;
compareFunctionFactory?: Function;
};
/** Column width configuration */
width?: number;
colWidths?: number | string | Function;
/** Column resizing */
manualColumnResize?: boolean | number[];
/** Column visibility */
hidden?: boolean;
}Internal Component Structure
The HotColumn component's internal structure and lifecycle.
/**
* Internal column component data and methods
*/
interface HotColumnInternal {
/** Generated column settings object */
columnSettings?: object;
/** Flag indicating if column uses renderer component */
usesRendererComponent?: boolean;
/** Create column settings from props and child components */
createColumnSettings(): void;
/** Component lifecycle - calls createColumnSettings on mount */
mounted(): void;
/** Render function - returns null (configuration only) */
render(): null;
}Column Methods Integration
Methods available through the parent HotTable for column-specific operations.
/**
* Column-related methods available on HotTable instance
*/
interface ColumnMethods {
/** Get all column settings from HotColumn children */
getColumnSettings(): HotTableProps[] | void;
/** Check if column uses renderer component (affects auto-sizing) */
usesRendererComponent?: boolean;
}Advanced Column Configuration
Complex column configurations for specialized use cases.
<template>
<hot-table :data="complexData">
<!-- Multi-level header column -->
<hot-column
title="Q1 Sales"
data="q1Sales"
type="numeric"
:numeric-format="{ pattern: '$0,0.00' }"
:validator="salesValidator"
class-name="sales-column"
/>
<!-- Conditional formatting column -->
<hot-column
title="Performance"
data="performance"
:renderer="performanceRenderer"
:className="getPerformanceClass"
/>
<!-- Nested object data column -->
<hot-column
title="Manager Name"
:data="(row, col) => complexData[row].manager?.name || ''"
:read-only="true"
/>
</hot-table>
</template>
<script>
export default {
methods: {
salesValidator(value) {
return !isNaN(value) && parseFloat(value) >= 0;
},
performanceRenderer(instance, td, row, col, prop, value) {
td.innerHTML = `<span class="performance-${value}">${value}</span>`;
return td;
},
getPerformanceClass(row, col, prop, value) {
return `performance-${value.toLowerCase()}`;
}
}
}
</script>Props Processing
Internal mechanism for processing and filtering props.
/**
* Props processing interface
*/
interface PropsProcessing {
/** All Handsontable column settings dynamically available as props */
[key: string]: any;
/** Internal method to filter assigned props from defaults */
filterPassedProps(props: object): object;
/** Generate prop schema from Handsontable column settings */
propFactory(source: 'HotColumn'): VueProps<HotTableProps>;
}The HotColumn component automatically makes all Handsontable column configuration options available as Vue props, enabling full customization while maintaining type safety and Vue's reactive system.