Table Cell - React

Table Cell

Impor

import { Table } from '@idds/react';

Contoh Penggunaan

Table with API Integration

Contoh implementasi Table dengan integrasi API menggunakan DummyJSON Products API. Menampilkan mekanisme fetch data, pagination, searching, sorting, dan loading state. Jika response API kosong atau terjadi error, akan menggunakan fallback dummy data.

Product	Price	Stock	Rating	Category
No data found

Props

Name	Type	Default	Required	Description
`columns`	`Column[]`	—	Yes	Array of column definitions.
`fetchData`	`(params: FetchParams) => Promise<FetchResult>`	—	Yes	Function to fetch table data.
`initialPage?`	`number`	`1`	No	Initial page number.
`initialPageSize?`	`number`	`10`	No	Initial page size for pagination.
`pageSizeOptions?`	`number[]`	`[10, 20, 50]`	No	Available page size options.
`initialSortField?`	`string \| null`	`null`	No	Initial field to sort by.
`initialSortOrder?`	`'asc' \| 'desc' \| null`	`null`	No	Initial sort order.
`placeholderSearch?`	`string`	`'Search...'`	No	Placeholder text for search input.
`className?`	`string`	`''`	No	Additional CSS class for container.
`selectable?`	`boolean`	`false`	No	Enable row selection with checkboxes.
`onSelectionChange?`	`(selectedRows: any[]) => void`	—	No	Callback when selection changes.
`editableColumns?`	`EditableColumn[]`	`[]`	No	Configuration for editable columns.
`onRowUpdate?`	`(updatedRow: any) => void`	—	No	Callback when a row is updated.
`rowKey?`	`string`	`'id'`	No	Unique property name for row key.
`showSearch?`	`boolean`	`false`	No	Show search input.
`rowClickable?`	`boolean`	`false`	No	Enable row click functionality.
`onRowClick?`	`(row: any) => void`	—	No	Callback when a row is clicked.
`lastColumnSticky?`	`boolean`	`false`	No	Make last column sticky on horizontal scroll.
`renderSortIndicator?`	`(params) => ReactNode`	—	No	Custom render function for sort indicator.
`showPagination?`	`boolean`	`true`	No	Show or hide the pagination controls.