Masukan
Tampilan
Umpan Balik
Media
Data Grid
Petak data yang bisa disunting langsung di selnya, dengan kemudi papan ketik, tempel dari papan klip, dan virtualisasi baris.
| # | Kode | Nama barang | Satuan | Jumlah | Harga |
|---|---|---|---|---|---|
| 1 | BRG-001 | Kertas A4 80gr | rim | 12 | 58000 |
| 2 | BRG-002 | Tinta printer hitam | botol | 6 | 95000 |
| 3 | BRG-003 | Map plastik | lusin | 20 | 32000 |
| 4 | BRG-004 | Pulpen biru | kotak | 15 | 24000 |
| 5 | BRG-005 | Stapler besar | buah | 4 | 78000 |
| 6 | BRG-006 | Kertas struk | roll | 30 | 9500 |
| 7 | BRG-007 | Amplop coklat | pak | 10 | 21000 |
| 8 | BRG-008 | Spidol papan tulis | kotak | 8 | 46000 |
Klik satu sel lalu pakai panah untuk berpindah. Enter atau F2 menyunting, mengetik huruf langsung menggantikan isinya, Escape mengurungkan, Delete mengosongkan. Shift dengan panah memilih beberapa sel; Ctrl+C menyalinnya dalam bentuk yang bisa ditempel ke Excel, dan Ctrl+V mengisinya kembali. Kolom Kode sengaja tidak bisa disunting.
Instalasi
bash
npx shadcn-vue@latest add https://kliping.pro/r/data-grid.jsonPenggunaan
vue
<script setup lang="ts">
import { DataGrid, DataGridCell } from '@/dice/data-grid'
</script>Bagian
| Bagian | Berkas |
|---|---|
DataGrid | src/dice/data-grid/DataGrid.vue |
DataGridCell | src/dice/data-grid/DataGridCell.vue |
Asalnya
Ditulis ulang untuk Vue dari Dice UI, MIT, Copyright (c) 2024 Sadman Sakib. Rincian kewajiban lisensinya ada di halaman kredit.