Handsontable cung cấp một bộ API mạnh mẽ để tương tác với dữ liệu và cấu trúc bảng. Dưới đây là tổng hợp các phương thức (methods) quan trọng thường dùng trong quá trình phát triển ứng dụng.

Khởi tạo dữ liệu mẫu

Trước tiên, chúng ta thiết lập một cấu trúc dữ liệu cơ bản và khởi tạo bảng Handsontable để làm ví dụ thực hiện các phương thức.

// Dữ liệu dạng mảng của mảng
const rawData = [
  ["A1", "B1", "C1", "D1"],
  ["A2", "B2", "C2", "D2"],
  ["A3", "B3", "C3", "D3"]
];

// Dữ liệu dạng đối tượng (Object Data)
const employeeData = [
  {id: 1, fullName: 'Nguyen Van A', position: 'Developer'},
  {id: 2, fullName: 'Tran Thi B', position: 'Designer'},
  {id: 3, fullName: 'Le Van C', position: 'Manager'}
];

const container = document.getElementById('grid-container');
const hot = new Handsontable(container, {
  data: employeeData,
  rowHeaders: true,
  colHeaders: ['ID', 'Họ Tên', 'Chức Vụ'],
  licenseKey: 'non-commercial-and-evaluation'
});

1. Truy xuất dữ liệu theo vùng (Range)

Phương thức getData cho phép lấy dữ liệu từ một vùng được chỉ định hoặc toàn bộ bảng.

// Lấy dữ liệu từ ô (0,0) đến (0,2)
console.log(hot.getData(0, 0, 0, 2)); 

// Nếu chỉ truyền 2 tham số (r, c), nó sẽ lấy dữ liệu từ (0,0) đến (r,c)
console.log(hot.getData(1, 1)); 

// Lấy toàn bộ dữ liệu bảng
console.log(hot.getData());

2. Truy xuất dữ liệu tại một ô cụ thể

Có hai cách chính để lấy giá trị của một ô: dựa vào tọa độ (hàng, cột) hoặc dựa vào thuộc tính của dữ liệu đối tượng.

// Lấy dữ liệu tại hàng 1, cột 2
console.log(hot.getDataAtCell(1, 2));

// Lấy dữ liệu tại hàng 1 theo tên thuộc tính (chỉ dành cho Object Data)
console.log(hot.getDataAtRowProp(1, 'fullName')); // Kết quả: 'Tran Thi B'

3. Lấy dữ liệu theo hàng và cột

Bạn có thể lấy toàn bộ dữ liệu của một hàng hoặc một cột dưới dạng mảng.

// Lấy mảng dữ liệu của hàng thứ 2
console.log(hot.getDataAtRow(2));

// Lấy mảng dữ liệu của cột thứ 1
console.log(hot.getDataAtCol(1));

// Lấy dữ liệu cột dựa trên tên thuộc tính
console.log(hot.getDataAtProp('position'));

4. Cập nhật dữ liệu cho ô

Để thay đổi giá trị của một hoặc nhiều ô, sử dụng setDataAtCell hoặc setDataAtRowProp.

// Cập nhật nhiều ô cùng lúc bằng mảng [hàng, cột, giá trị mới]
hot.setDataAtCell([
  [0, 1, 'Nguyen Van Moi'],
  [1, 1, 'Tran Thi Moi']
]);

// Cập nhật dựa trên tên thuộc tính
hot.setDataAtRowProp(2, 'position', 'Director');

5. Thêm hoặc xóa hàng và cột

Sử dụng phương thức alter để thay đổi cấu trúc bảng như chèn hoặc xóa các thành phần.

// Chèn một hàng mới vào vị trí index số 2
hot.alter('insert_row', 2);

// Chèn một cột mới vào vị trí index số 1 (Chỉ hoạt động hiệu quả với Array Data)
hot.alter('insert_col', 1);

// Xóa hàng/cột hiện tại
hot.alter('remove_row', 0); // Xóa hàng đầu tiên
hot.alter('remove_col', 0); // Xóa cột đầu tiên

6. Thao tác với Cell Meta và Lựa chọn

Handsontable cho phép can thiệp sâu vào thuộc tính của từng ô (metadata) và quản lý trạng thái chọn ô.

// Lấy đối tượng DOM của ô tại (1,1)
const cellElement = hot.getCell(1, 1);

// Quản lý Metadata của ô
hot.setCellMeta(1, 1, 'readOnly', true); // Thiết lập ô chỉ đọc
const meta = hot.getCellMeta(1, 1);

// Thực hiện chọn một vùng ô
hot.selectCell(0, 0, 1, 1);

// Lấy giá trị của ô đang được chọn
console.log(hot.getValue());

// Lấy tọa độ của vùng đang được chọn
console.log(hot.getSelected()); // Trả về [startRow, startCol, endRow, endCol]

7. Thống kê số lượng hàng và cột

Phương thức đơn giản để kiểm tra kích thước hiện tại của bảng.

console.log('Tổng số hàng:', hot.countRows());
console.log('Tổng số cột:', hot.countCols());

8. Chuyển đổi giữa Index và Property

Khi làm việc với Object Data, việc chuyển đổi qua lại giữa chỉ số cột và tên thuộc tính rất quan trọng.

// Lấy chỉ số cột dựa trên tên thuộc tính
const colIndex = hot.propToCol('fullName');

// Lấy tên thuộc tính dựa trên chỉ số cột
const propName = hot.colToProp(2);

9. Thao tác với Header

Lấy tiêu đề của hàng hoặc cột dựa trên cấu hình rowHeaders và colHeaders.

// Lấy tiêu đề hàng thứ 1
console.log(hot.getRowHeader(1));

// Lấy danh sách tất cả tiêu đề cột
console.log(hot.getColHeader());

10. Làm sạch bảng

Để xóa toàn bộ nội dung trong bảng mà không phá hủy instance của Handsontable.

hot.clear();