Skip to content

Commit

Permalink
update table
Browse files Browse the repository at this point in the history
  • Loading branch information
@lerte
lerte committed Dec 1, 2024
1 parent 3114b34 commit dfa8361
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 11 deletions.
38 changes: 38 additions & 0 deletions apps/docs/content/components/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,41 @@ description: Table is a component that allows you to display tabular data.
## Usage

<usage></usage>

## Props

### Table

| Name | Type | Default | Description |
| ---------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------ |
| children | `ReactNode` | — | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| selectionBehavior | `SelectionBehavior` | 'toggle' | How multiple selection should behave in the collection. |
| disabledBehavior | `DisabledBehavior` | 'selection' | Whether disabledKeys applies to all interactions, or only selection. |
| dragAndDropHooks | `DragAndDropHooks` | — | The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table. |
| disabledKeys | `Iterable<Key>` | — | A list of row keys to disable. |
| selectionMode | `SelectionMode` | — | The type of selection that is allowed in the collection. |
| disallowEmptySelection | `boolean` | — | Whether the collection allows empty selection. |
| selectedKeys | `'all' \| Iterable<Key>` | — | The currently selected keys in the collection (controlled). |
| defaultSelectedKeys | `'all' \| Iterable<Key>` | — | The initial selected keys in the collection (uncontrolled). |
| sortDescriptor | `SortDescriptor` | — | The current sorted column and direction. |
| className | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. |

### Events

| Name | Type | Description |
| ----------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| onRowAction | `(key: Key) => void` | Handler that is called when a user performs an action on the row. |
| onSelectionChange | `(keys: Selection) => void` | Handler that is called when the selection changes. |
| onSortChange | `(descriptor: SortDescriptor) => any` | Handler that is called when the sorted column or direction changes. |
| onScroll | `(e: UIEvent<Element>) => void` | Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). |

### TableHeader

| Name | Type | Description |
| ------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| columns | `object[]` | A list of table columns. |
| children | `ReactNode \| (item: object) => ReactElement` | A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop. |
| dependencies | `any[]` | Values that should invalidate the column cache when using dynamic collections. |
| className | `string` | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | `React.CSSProperties` | The inline style for the element. A function may be provided to compute the style based on component state. |
11 changes: 0 additions & 11 deletions apps/docs/src/usages/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,13 @@ import {
useAsyncList
} from 'actify'

import { useState } from 'react'

interface StarWarsChar {
name: string
url: string
[x: string]: string
}

export default () => {
const totalPages = 20
const [currentPage, setCurrentPage] = useState(1)

const handlePageChange = (page: number) => {
setCurrentPage(page)
}

const list = useAsyncList<StarWarsChar>({
async load({ signal }) {
let res = await fetch('https://swapi.py4e.com/api/people/?search', {
Expand All @@ -37,9 +28,7 @@ export default () => {
async sort({ items, sortDescriptor }) {
return {
items: items.sort((a, b) => {
// @ts-ignore
const first = a[sortDescriptor.column]
// @ts-ignore
const second = b[sortDescriptor.column]

let cmp =
Expand Down

0 comments on commit dfa8361

Please sign in to comment.