docs: add section on row click in DataTable (#11694)
* docs: add section on row click in DataTable * update subscriptions example
This commit is contained in:
Shahed Nasser
@@ -2,10 +2,11 @@ import { Documentation } from "react-docgen"
|
||||
import { Suspense } from "react"
|
||||
import { Spinner } from "@medusajs/icons"
|
||||
import { PropTable } from "./props-table"
|
||||
import { Container, clx } from "@medusajs/ui"
|
||||
import { Container } from "@medusajs/ui"
|
||||
import { Feedback } from "./feedback"
|
||||
import { MarkdownContent } from "docs-ui"
|
||||
import { H3, MarkdownContent } from "docs-ui"
|
||||
import { components } from "./mdx-components"
|
||||
import slugify from "slugify"
|
||||
|
||||
type ComponentReferenceProps = {
|
||||
mainComponent: string
|
||||
@@ -32,6 +33,11 @@ const ComponentReference = ({
|
||||
)
|
||||
const hasProps =
|
||||
componentSpec?.props && Object.keys(componentSpec.props).length > 0
|
||||
const componentName =
|
||||
componentsToShow.length > 1
|
||||
? componentSpec?.displayName || component
|
||||
: ""
|
||||
const componentSlug = slugify(componentName)
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -44,9 +50,7 @@ const ComponentReference = ({
|
||||
{componentSpec && (
|
||||
<>
|
||||
{componentsToShow.length > 1 && (
|
||||
<h3 className={clx("h3-docs mb-2 mt-10 text-medusa-fg-base")}>
|
||||
{componentSpec.displayName || component}
|
||||
</h3>
|
||||
<H3 id={componentSlug}>{componentName}</H3>
|
||||
)}
|
||||
{componentSpec.description && (
|
||||
<MarkdownContent components={components}>
|
||||
|
||||
@@ -66,7 +66,7 @@ The `createDataTableColumnHelper` utility is a function that returns a helper us
|
||||
For each column in the table, use the `accessor` method of the column helper to specify configurations for a specific column. The `accessor` method accepts the column's key in the table's data as the first parameter, and an object with the following properties as the second parameter:
|
||||
|
||||
- `header`: The table header text for the column.
|
||||
- `enableSorting`: (optional) A boolean that indicates whether data in the table can be sorted by this column. More on sorting in [this section](#datatable-with-sorting).
|
||||
- `enableSorting`: (optional) A boolean that indicates whether data in the table can be sorted by this column. More on sorting in [this section](#configure-sorting-in-datatable).
|
||||
|
||||
### Create Table Instance
|
||||
|
||||
@@ -146,6 +146,39 @@ Refer to the examples later on this page to learn how to add pagination, filteri
|
||||
|
||||
Refer to [this Admin Components guide](https://docs.medusajs.com/resources/admin-components/components/data-table) for an example on using the `DataTable` component with data fetching from the Medusa application.
|
||||
|
||||
## Handle Row Click
|
||||
|
||||
---
|
||||
|
||||
<ComponentExample name="data-table-row-click" disableCenterAlignPreview />
|
||||
|
||||
In many cases, you want to perform an action when a row is clicked. Most commonly, you may want to open the details page of the row when it's clicked.
|
||||
|
||||
<Note>
|
||||
|
||||
For bulk actions, such as deleting multiple rows, use the [Command Bar](#perform-bulk-actions-on-datatable-rows) instead.
|
||||
|
||||
</Note>
|
||||
|
||||
The `useDataTable` hook accepts an `onRowClick` property that you can use to handle row clicks:
|
||||
|
||||
```tsx
|
||||
const navigate = useNavigate()
|
||||
|
||||
const table = useDataTable({
|
||||
// ...
|
||||
onRowClick(event, row) {
|
||||
navigate(`/author/${row.id}`)
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
The value of `onRowClick` is a function that accepts two parameters:
|
||||
|
||||
- `event`: An instance of the [MouseClickEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) object.
|
||||
- `row`: The data of the row that was clicked.
|
||||
|
||||
In the above example, you use a `navigate` function, retrieved through the `useNavigate` hook from `react-router-dom`, to navigate to the details page of the row that was clicked.
|
||||
|
||||
## Configure Cell Rendering
|
||||
|
||||
@@ -193,7 +226,7 @@ const columns = [
|
||||
|
||||
The `cell` property's value is a function that returns a string or a React node to be rendered in the cell. The function receives as a parameter an object having a `getValue` property to get the raw value of the cell.
|
||||
|
||||
## DataTable with Search
|
||||
## Configure Search in DataTable
|
||||
|
||||
---
|
||||
|
||||
@@ -261,7 +294,7 @@ return (
|
||||
|
||||
This will show a search input at the top of the table, in the data table's toolbar.
|
||||
|
||||
## DataTable with Pagination
|
||||
## Configure Pagination in DataTable
|
||||
|
||||
---
|
||||
|
||||
@@ -357,7 +390,7 @@ return (
|
||||
|
||||
This will show the pagination controls at the end of the table.
|
||||
|
||||
## DataTable with Filters
|
||||
## Configure Filters in DataTable
|
||||
|
||||
---
|
||||
|
||||
@@ -626,7 +659,7 @@ const [filtering, setFiltering] = useState<DataTableFilteringState>({
|
||||
|
||||
The user can still change the filter values, but the initial values will be applied when the table is first rendered.
|
||||
|
||||
## DataTable with Sorting
|
||||
## Configure Sorting in DataTable
|
||||
|
||||
---
|
||||
|
||||
@@ -767,7 +800,7 @@ const [sorting, setSorting] = useState<DataTableSortingState | null>({
|
||||
|
||||
The user can still change the sort values, but the initial values will be applied when the table is first rendered.
|
||||
|
||||
## DataTable with Command Bar
|
||||
## Perform Bulk Actions on DataTable Rows
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { createDataTableColumnHelper, useDataTable, DataTable, Heading } from "@medusajs/ui"
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Shirt",
|
||||
price: 10
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Pants",
|
||||
price: 20
|
||||
}
|
||||
]
|
||||
|
||||
const columnHelper = createDataTableColumnHelper<typeof products[0]>()
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("title", {
|
||||
header: "Title",
|
||||
enableSorting: true,
|
||||
}),
|
||||
columnHelper.accessor("price", {
|
||||
header: "Price",
|
||||
enableSorting: true,
|
||||
}),
|
||||
]
|
||||
|
||||
export default function ProductTable () {
|
||||
const table = useDataTable({
|
||||
columns,
|
||||
data: products,
|
||||
getRowId: (product) => product.id,
|
||||
rowCount: products.length,
|
||||
isLoading: false,
|
||||
onRowClick: (event, row) => {
|
||||
alert(`You clicked row #${row.id}`)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<DataTable instance={table}>
|
||||
<DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
|
||||
<Heading>Products</Heading>
|
||||
</DataTable.Toolbar>
|
||||
<DataTable.Table />
|
||||
</DataTable>
|
||||
)
|
||||
}
|
||||
@@ -92,6 +92,13 @@ export const ExampleRegistry: ExampleRegistryType = {
|
||||
component: React.lazy(async () => import("@/examples/data-table-demo")),
|
||||
file: "src/examples/data-table-demo.tsx",
|
||||
},
|
||||
"data-table-row-click": {
|
||||
name: "data-table-row-click",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/data-table-row-click")
|
||||
),
|
||||
file: "src/examples/data-table-row-click.tsx",
|
||||
},
|
||||
"data-table-custom-cell": {
|
||||
name: "data-table-custom-cell",
|
||||
component: React.lazy(
|
||||
|
||||
Reference in New Issue
Block a user