> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # TablePc Spreadsheet > Dokumentasi lengkap komponen TablePc di YiDA — pelajari properti dan peristiwa seperti pengikatan Sumber Data, pengurutan, penyaringan, dan penguncian Kolom untuk menampilkan data Daftar secara profesional. 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\[\]](/id/open/yida/components/interface#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` |