@alchez/atable NPM

ATable

User Guide

Key(s)	Function
Enter	`downCell`
Tab	`nextCell`
Shift + Enter	`upCell`
Shift+ Tab	`prevCell`
←	`prevCell`
↑	`upCell`
→	`nextCell`
↓	`downCell`
Home	`lastCell`
End	`firstCell`

Column API

The primary API for ATable is the column object.

title: String; optional
name: String; required (a reference to the column that must follow rules for valid JS variable naming)
type: String; optional (a valid data types, full list below)
align: String; optional (one of left, right or center; defaults to center)
edit: Boolean; optional (indicates if the field is editable; defaults to false)
width: String; optional (used to indicate the width of the cell; defaults to 40ch)
mask: Function; optional (a custom mask for the field, several are provided with types by default)
options: Function; optional (used with Select, Currency, and Quantity fields)

{
  title: 'Batch Name',
  name: 'name',
  type: 'Data',
  align: 'right',
  edit: false,
},
{
  title: 'Species',
  name: 'species',
  type: 'Select',
  align: 'left',
  edit: true,
  width: '30ch',
  required: true,
  options: () => ['Rainbow Trout', 'Steelhead', 'Golden Trout', 'Pacific Salmon']
},
{
  title: 'Date',
  name: 'set_date',
  type: 'Date',
  align: 'center',
  edit: true,
  width: '30ch',
  mask: value => `${value}+/-`,
}

Column Data Types

v0.1

Data/ Text (unformatted text)
Number (can be backed by int, decimal or float)
Hyperlink
Currency
Quantity
Date
Date Range
Select / Datalist / Combobox

v0.2

Rich Text Editor
Image
File
Diagram

uuid vue @alchez/themes @alchez/utilities

@alchez/desktop

0.2.8

1 year ago

0.2.2

2 years ago