TablePc Spreadsheet - DingTalk Help Center

Menampilkan data baris dan kolom.

Kapan digunakan

Tabel merender data dalam bentuk tabel HTML yang sangat fleksibel untuk dikustomisasi dan mudah diakses. Fungsi intinya adalah menyajikan data terstruktur dalam format tabel.
Manfaatkan berbagai parameter untuk menambahkan fitur seperti pengurutan, penyaringan, pengguliran, dan penguncian Kolom.

Contoh komponen

Properti komponen

Properti	Deskripsi	Tipe	Default
`actionBar`	Atur bilah tindakan atas.	`array`	`[{title: {zh_CN: '操作1',en_US: 'Action 1',type: 'i18n'},option: 'callback'}]`
`actionFixed`	Kunci Kolom Tindakan sebagai Kolom tetap.	`string`	`'none'`
`actionHidden`	Tentukan apakah Kolom Tindakan disembunyikan.	`boolean`	`false`
`actionTitle`	Atur Judul Kolom Tindakan.	`string`	`'Action'`
`actionType`	Atur Tipe Tombol pada Kolom Tindakan.	`string`	`'link'`
`actionWidth`	Atur lebar Kolom Tindakan.	`number`	`0`
`cellProps`	Atur gaya dan tampilan — Pemisahan dan penggabungan Sel.	`(rowIndex: number,colIndex: number,dataIndex: number,record: object)=>void`	-
`columnProps`	Atur pemilih baris — properti Kolom Pemilihan.	`() => void`	-
`columns`	Atur kolom data melalui pengikatan Sumber Data.	TableColumn[]	-
`data`	Sumber Data.	`any[]`	-
`dataSourceType`	Tipe Sumber Data.	`'data' \| 'url'`	`'data'`
`device`	Atur item tindakan — Tampilkan pada perangkat tertentu.	`string`	-
`emptyContent`	Atur gaya dan tampilan — Rendering saat data kosong.	`() => ReactNode`	-
`expandedRowIndent`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan; indentasi baris tambahan yang dirender.	`array`	`[]`
`expandedRowRender`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan; fungsi render untuk baris tambahan.	`(record: object, index: number) => ReactNode`	-
`fixedHeader`	Atur gaya dan tampilan — Apakah header tetap.	`boolean`	`true`
`getExpandedColProps`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan; atur properti baris tambahan.	`(record: object, index: number) => ReactNode`	-
`getProps`	Atur pemilih baris — properti pemilih.	`(rowData: object, index: number) => void`	-
`hasExpandedRowCtrl`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan; Tombol Ciutkan.	`boolean`	`true`
`hasHeader`	Atur gaya dan tampilan — Tampilkan header.	`boolean`	`true`
`isDisabled`	Atur bilah tindakan atas — Navigasi Halaman, apakah Dinonaktifkan.	`boolean`	-
`isExpand`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan.	`boolean`	`false`
`isPagination`	Pengaturan Paginasi — Gunakan paginasi.	`boolean`	`true`
`isPagination`	Pengaturan Paginasi — Apakah pager disembunyikan jika hanya ada satu halaman.	`boolean`	`false`
`isTree`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan mode pohon.	`boolean`	`false`
`loading`	Apakah status Memuat aktif.	`boolean`	`false`
`loadingComponent`	Atur gaya dan tampilan — Atur Komponen Memuat.	`()=>ReactNode`	-
`maxBodyHeight`	Atur gaya dan tampilan — Apakah header tetap; tinggi maksimum area konten.	`number`	`0`
`maxWebShownActionCount`	Atur jumlah maksimum tindakan yang ditampilkan.	`number`	`3`
`mobileActionsStyle`	Pengaturan khusus perangkat mobile — Mode ekspansi, gaya tindakan.	`string`	-
`mobileDefaultCardColumns`	Pengaturan khusus perangkat mobile — Mode ekspansi, jumlah Bidang default.	`string`	`4`
`mobileExpanViewMode`	Pengaturan khusus perangkat mobile — Mode ekspansi.	`string`	`normal`
`mobileMargin`	Pengaturan khusus perangkat mobile — Atur margin default.	`number`	`0`
`mobileMode`	Pengaturan khusus perangkat mobile — Gaya tampilan.	`string`	`normal`
`mode`	Atur item tindakan — Tampilkan dalam status Edit.	`string`	`'VIEW'`
`mode`	Atur pemilih baris — Tipe.	`'single' \| 'multiple'`	`'multiple'`
`noPadding`	Premium — Sembunyikan margin.	`boolean`	`false`
`onCellDataChange`	Pengaturan Tindakan — Terpicu saat data berubah dalam mode edit.	`({data: object}) => void`	-
`onChange`	Atur pemilih baris — Callback perubahan seleksi.	`(selectedRowKeys: array,records: array)=>void`	-
`onColumnsChange`	Atur bilah tindakan atas — Callback filter Kolom.	`(columns: object)=>void`	-
`onFetchData`	Pengaturan Tindakan — Terpicu saat paginasi, Cari, atau Urutkan.	`({params: object}) => void`	-
`onResizeChange`	Pengaturan Tindakan — Terpicu saat ukuran Kolom diubah.	`({dataIndex: string, value:number}) => void`	-
`onRowClick`	Pengaturan Tindakan — Terpicu saat sebuah Rekam diklik.	`({record: object, index:number, evt:object}) => void`	-
`onRowMouseEnter`	Pengaturan Tindakan — Terpicu saat kursor melayang di atas Rekam.	`({record: object, index: number, evt: object}) => void`	-
`onRowMouseLeave`	Pengaturan Tindakan — Terpicu saat kursor meninggalkan Rekam.	`({record: object, index:number, evt:object}) => void`	-
`onRowOpen`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan; peristiwa yang terpicu saat ekspansi / penciutan.	`(openRowKeys: array, currentRowKey: string, expanded: boolean, currentRecord: object) => void`	-
`onSelect`	Atur pemilih baris — Callback pemilihan baris tunggal.	`({selected: boolean,rowData: object,selectedRows: array})=>void`	-
`onSelectAll`	Atur pemilih baris — Callback Pilih Semua.	`(selected: boolean,selectedRows: array)=>void`	-
`openRowKeys`	Atur Spreadsheet yang dapat diciutkan / pohon — Aktifkan penciutan; baris yang diperluas secara default.	`string[]`	-
`pageMode`	Atur bilah tindakan atas — Navigasi Halaman, status Halaman terkait.	`string`	-
`pageShowCount`	Pengaturan Paginasi — Jumlah nomor halaman yang ditampilkan.	`number`	`5`
`pageSize`	Pengaturan Paginasi — pageSize.	`number`	`10`
`pageSizeList`	Pengaturan Paginasi — Nilai yang tersedia pada pemilih ukuran halaman.	`array`	`[5,10,20]`
`pageSizePosition`	Pengaturan Paginasi — Posisi pemilih ukuran halaman di dalam Komponen.	`string`	`'end'`
`pageSizeSelector`	Pengaturan Paginasi — Tipe pemilih ukuran halaman.	`boolean`	`false`
`pagination`	Pengaturan Paginasi — Lokasi Paginasi.	`string`	`'right'`
`primaryKey`	Atur Kunci utama data. Kunci utama digunakan untuk membedakan baris dan sangat penting untuk pemilihan serta pengeditan baris. Nilainya harus Unik di seluruh baris. Umumnya digunakan Bidang ID auto-increment dari database.	`string`	`'id'`
`render`	Atur item tindakan — Rendering kustom.	`(title: object,rowData: object)=>{title}`	-
`rowProps`	Atur gaya dan tampilan — Konfigurasi properti baris Sel.	`(record: object,index: number)=>void`	-
`searchBarPlaceholder`	Atur bilah tindakan atas — Placeholder bilah pencarian.	`string`	`'Search'`
`selectedRowKeys`	Atur pemilih baris — Baris yang Dipilih.	`string[]`	-
`setEmptyContent`	Atur gaya dan tampilan — Rendering kustom saat data kosong.	`boolean`	`false`
`setLoadingComponent`	Atur gaya dan tampilan — Komponen Memuat kustom.	`boolean`	`false`
`shape`	Pengaturan Paginasi — Gaya Tombol Sebelumnya / Berikutnya.	`string`	`arrow-only`
`showActionBar`	Atur bilah tindakan atas — Tampilkan bilah tindakan.	`boolean`	`true`
`showCustomBarItem`	Atur bilah tindakan atas — Tampilkan area Kustom.	`boolean`	`false`
`showCustomCoulmn`	Atur bilah tindakan atas — Tampilkan filter Kolom.	`boolean`	`false`
`showCustomCoulmn`	Atur bilah tindakan atas — Rendering area Kustom.	`()=>void`	-
`showLinkBar`	Atur bilah tindakan atas — Apakah menampilkan bilah tautan eksternal.	`boolean`	`true`
`showMiniPager`	Pengaturan Paginasi — Apakah menampilkan pager mini di bagian atas (hanya rendering PC).	`boolean`	`false`
`showRowSelector`	Atur pemilih baris — Apakah menampilkannya.	`boolean`	`false`
`showSearch`	Atur bilah tindakan atas — Tampilkan bilah pencarian.	`boolean`	`true`
`size`	Pengaturan Paginasi — Ukuran Paginasi.	`string`	`'medium'`
`stickyHeader`	Atur gaya dan tampilan — Apakah header lengket.	`boolean`	`false`
`theme`	Atur gaya dan tampilan — Subjek.	`string`	`'split'`
`title`	Atur item tindakan — Judul.	`string`	`'Details'`
`title`	Atur bilah tindakan atas — Judul bilah tindakan.	`string`	`'Action'`
`title`	Atur bilah tindakan atas — Bilah tindakan tautan eksternal, Judul tindakan tautan eksternal.	`string`	`'External Link Action'`
`titleAddons`	Atur pemilih baris — Elemen header untuk Kolom Pemilihan.	`(rowData: object,index: number) => ReactNode`	-
`titleProps`	Atur pemilih baris — Properti header untuk Kolom Pemilihan.	`(rowData: object, index: number) => void`	-
`type`	Pengaturan Paginasi — Tipe Paginasi.	`string`	`'normal'`
`useStickyLock`	Premium — Atur optimasi penguncian Kolom.	`boolean`	`false`
`useVirtual`	Atur gaya dan tampilan — Pengguliran virtual.	`boolean`	`false`