資料表格以原生 table 元素為基礎,支援排序、篩選、分頁和編輯。定義好 columns,傳入 rows,每個儲存格就會依類型和地區設定格式化:數字、貨幣、日期、是或否,以及 enum 值的標籤。

它的狀態都存放在模型中,可以繫結、儲存或傳送到伺服器:sort、filters、search、page、selected,以及記錄使用者設定的欄寬、順序、固定和隱藏欄的 columnState。不分頁時只渲染可見的列,因此十萬列捲動起來也像十列一樣流暢。

每個儲存格都能用鍵盤抵達;每一欄的面板都能對該欄排序、篩選、固定、移動、自動調整欄寬和隱藏。

搜尋、排序與分頁

輸入文字即可搜尋所有欄。點擊欄標題即可排序,按住 Shift 鍵點擊可再加入第二個排序欄。nuiGridCell 負責繪製狀態,exportCsv() 則會匯出目前顯示的內容。

列選取

selection="multiple" 會加上核取方塊,並繫結所選列的 key。按住 Shift 鍵點擊可選取一個範圍;標題列的核取方塊會選取所有符合篩選條件的列。

編輯

雙擊儲存格、按 Enter 鍵,或直接輸入即可編輯。validate 會讓編輯器保持開啟並顯示訊息;確認後的編輯會更新 rows 並發出 cellEdit。

十萬列

不分頁時只渲染可見的列。固定的欄會停留在兩側邊緣,columnState 會保留使用者調整後的版面。

伺服器資料

在 server 模式下,表格會照收到的樣子顯示列,並透過 queryChange 回報每次變更。擷取資料期間請設定 loading。