Skip to content

Commit

Permalink
wip: more on data-table component
Browse files Browse the repository at this point in the history
  • Loading branch information
bouassaba committed Nov 2, 2024
1 parent 0c6dc9c commit 2d614eb
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 7 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/check-on-pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,4 @@ jobs:
permissions:
contents: read
pull-requests: read
checks: write
checks: write
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
npm i @koupr/ui
```

Koupr UI is meant to work on top of Chakra UI: https://v2.chakra-ui.com/getting-started
Koupr UI is meant to work on top of Chakra UI: https://v2.chakra-ui.com/getting-started

## Usage

```tsx
import { createRoot } from 'react-dom/client'
import { theme } from '@koupr/ui'
import App from "./App"
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root') as HTMLElement).render(
<ChakraProvider theme={theme}>
<App/>
<App />
</ChakraProvider>,
)
```
Expand Down
1 change: 1 addition & 0 deletions src/components/data-table.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ReactElement } from 'react'
import { Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
import cx from 'classnames'

Check failure on line 3 in src/components/data-table.tsx

View workflow job for this annotation

GitHub Actions / lint

'cx' is defined but never used

export interface DataTableProps<T> {
items: T[]
Expand Down
38 changes: 36 additions & 2 deletions src/stories/components/data-table.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { DataTable } from '@koupr/ui'
import { Avatar, Link } from '@chakra-ui/react'
import { DataTable, PagePagination, usePagePagination } from '@koupr/ui'
import { Meta, StoryObj } from '@storybook/react'
import cx from 'classnames'
import { useLocation, useNavigate } from 'react-router-dom'

const meta: Meta<typeof DataTable> = {
title: 'Components/Data Table',
Expand Down Expand Up @@ -35,12 +38,43 @@ export const Default: Story = {
columns: [
{
title: 'Name',
cellFn: (item) => <span>{item.name}</span>,
cellFn: (item) => (
<div className={cx('flex', 'flex-row', 'gap-1.5', 'items-center')}>
<Avatar
name={item.name}
size="sm"
className={cx('w-[40px]', 'h-[40px]')}
/>
<Link className={cx('no-underline')}>{item.name}</Link>
</div>
),
},
{
title: 'Symbol',
cellFn: (item) => <span>{item.symbol}</span>,
},
],
},
render: (args) => {
const navigate = useNavigate()
const location = useLocation()
const { page, size, steps, setPage, setSize } = usePagePagination({
navigate,
location,
})
return (
<div className={cx('flex', 'flex-col', 'items-end', 'gap-3.5')}>
<DataTable {...args} />
<PagePagination
totalElements={100}
totalPages={25}
page={page}
size={size}
steps={steps}
setPage={setPage}
setSize={setSize}
/>
</div>
)
},
}

0 comments on commit 2d614eb

Please sign in to comment.