Bộ lập lịch và bảng dữ liệu cũng là component React, nằm trong @needless-ui/react: cùng tính năng, cách dùng bàn phím và khả năng tiếp cận như trong Angular, cùng stylesheet và cùng giấy phép MIT. Các component khác sẽ ra mắt sau. Chúng cần React 19, và chạy được với cả Next.js App Router lẫn Vite.
Cài đặt
pnpm add @needless-ui/react @needless-ui/cssImport style
Các component không kèm style nào. Hãy import stylesheet một lần, từ một tệp CSS của ứng dụng.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Layer hoạt động như trong Angular: các reset nằm trong một layer trước nui, còn với Tailwind CSS, nui nằm giữa layer base của Tailwind và layer utilities, như phần bắt đầu sử dụng đã trình bày.
Bộ lập lịch
Mỗi component có entry point riêng. Bộ lập lịch hiển thị các events bạn truyền vào, và báo cho bạn khi người dùng di chuyển một sự kiện hoặc chọn thời gian cho sự kiện mới: việc lưu giữ sự kiện là của bạn.
Bảng dữ liệu
Hãy mô tả columns bên ngoài component, để bảng không phải làm lại việc của nó sau mỗi lần render. Mỗi lần sửa sẽ gọi onRowsChange với các dòng mới, còn những phương thức như xuất Excel nằm trên ref của bảng.
API theo cách của React
Các component React tuân theo cùng đặc tả với các component Angular, nên API của chúng tương ứng với nhau, theo cách của React. Các trang API liệt kê mọi prop: của bộ lập lịch và của bảng dữ liệu.
| Angular | React |
|---|---|
Model, [(view)] | State: view cùng onViewChange, hoặc defaultView để component tự giữ |
Output, (eventClick) | Callback, onEventClick |
Template, <ng-template nuiSchedulerEvent> | Một hàm vẽ, renderEvent |
Phương thức, scheduler.next() | Phương thức trên ref, ref.current.next() |
children, cho dữ liệu dạng cây | getChildren: React dành children cho phần tử |
locale, mặc định là LOCALE_ID của ứng dụng | locale, mặc định là en-US |
Render phía máy chủ
Cả hai component đều render trên máy chủ rồi hydrate trong trình duyệt. Gói đánh dấu chúng là client component, nên một Server Component có thể render chúng với các prop tuần tự hóa được, và các hàm hỗ trợ như nuiSchedulerFromIcs chạy trên máy chủ. Callback không thể truyền từ máy chủ sang trình duyệt: component nhận chúng phải nằm trong một client component của riêng bạn, như hai ví dụ ở trên.
Những gì phụ thuộc vào người đọc sẽ chờ đến trình duyệt: vạch giờ hiện tại của bộ lập lịch, và hôm nay là ngày nào. Hãy truyền defaultDate cho bộ lập lịch khi máy chủ render nó, vì “hôm nay” của máy chủ có thể khác với của người đọc.