Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arkemishub/table
Flexible and extensible table
https://github.com/arkemishub/table
arke table
Last synced: 19 days ago
JSON representation
Flexible and extensible table
- Host: GitHub
- URL: https://github.com/arkemishub/table
- Owner: arkemishub
- License: apache-2.0
- Created: 2023-05-12T12:46:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-07T10:07:10.000Z (7 months ago)
- Last Synced: 2024-08-09T08:07:17.735Z (5 months ago)
- Topics: arke, table
- Language: TypeScript
- Homepage: https://table.arkehub.com
- Size: 2.76 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @arkejs/table
[](https://github.com/arkemishub/arke-monorepo/blob/master/LICENSE.txt)
## Documentation
For full documentation, visit [https://arkemishub.github.io/table/](https://arkemishub.github.io/table/)
## Install
How to install `@arkejs/table`?
Install `@arkejs/table`
```shell
npm i @arkejs/table
```
## Usage
`@arkejs/table` can be used in two different ways, based on your needs.
---
### Basic Usage
The basic implementation allows you to display data without having any sort of control over pagination, filtering and more.
```jsx
```
---
### Advanced Usage
Advanced use cases which includes filtering, pagination and more can be achieved by using `useTable` hook.
The `useTable` hook provides several functionalities for managing the table in a *headless* way.
Let's dive into this example:
```jsx
function MyTable() {
const {tableProps, goToPage, currentPage, pageCount} = useTable({
pagination: {
totalCount: 100,
pageSize
},
});
return
}
```
As you can see by using `useTable` we don't need to define props for the `Table` component since they are returned in `tableProps`.
In addition, the hook provides us some ways to manage the table externally.
Let's now implement a simple pagination, fully controlled by outside.
```jsx
function MyTable() {
const {tableProps, goToPage, currentPage, pageCount} = useTable({
pagination: {
totalCount: 100,
pageSize
},
});
return (
<>
{
goToPage(currentPage - 1);
}}
>
{"<"}
{
goToPage(currentPage + 1);
}}
>
{">"}
>
);
}
```
By using `useTable` exported function we ended up with a `Table` which pagination is managed in the way that we like.
### How versioning with changesets
The @arkejs/ui use [changeset](https://github.com/changesets/changesets) to versioning changes.
After your commits run `npx changeset`, it will ask if you want to use a patch/minor/major a summary for your changes.
Completed the process will be created a `.md` file under `.changeset` folder, commit it to create your PR.