Component Table

The table component works with refinedev's react table hook. In the code example below, the useTable hook is defined with the column defined as empty. For more detailed usage examples, please see List.

Table

import { FC } from "react";
import { useTable } from "@refinedev/react-table";
import { Table } from "@ferdiunal/refinedev-shadcn-ui";

const table = useTable({
    columns: [],
});

<Table table={table}>{/* Table columns are used here. */}</Table>;

Props

props	type	description
table	object	useTable return values

---

Column

You can use the following code example to specify columns for the table.

import { FC } from "react";
import { useTable } from "@refinedev/react-table";
import { Table } from "@ferdiunal/refinedev-shadcn-ui";

const table = useTable({
    columns: [],
});

<Table table={table}>
    <Table.Column header={"ID"} accessorKey="id" enableSorting enableHiding />
    <Table.Column
        header={"Title"}
        accessorKey="title"
        enableSorting
        enableHiding
        filter={(props: TableFilterProps) => (
            <Table.Filter.Search {...props} title="Search Title" />
        )}
    />
    <Table.Column
        header={"Status"}
        accessorKey="status"
        enableSorting
        enableHiding
        filter={(props: TableFilterProps) => (
            <Table.Filter.Dropdown
                {...props}
                options={[
                    {
                        label: "Published",
                        value: "published",
                    },
                    {
                        label: "Draft",
                        value: "draft",
                    },
                    {
                        label: "Rejected",
                        value: "rejected",
                    },
                ]}
            />
        )}
    />
    <Table.Column
        header={"CreatedAt"}
        accessorKey="createdAt"
        enableSorting
        enableHiding
        filter={(props: TableFilterProps) => (
            <Table.Filter.DateRangePicker {...props} align="end" />
        )}
    />
    <Table.Column
        accessorKey={"id"}
        cell={({ row: { original } }) => (
            <Table.Actions>
                <Table.ShowAction
                    title="Detail"
                    row={original}
                    resource="posts"
                    icon={<Eye size={16} />}
                />
                <Table.EditAction
                    title="Edit"
                    row={original}
                    resource="posts"
                    icon={<Edit size={16} />}
                />
                <Table.DeleteAction
                    title="Delete"
                    row={original}
                    withForceDelete={true}
                    resource="posts"
                    icon={<Trash2 size={16} />}
                />
            </Table.Actions>
        )}
    />
</Table>;

Props

props	type	description
header	string | FC<{table: UseTableReturnType<TData, TError>;}>	Text of the table column
accessorKey	string	The key of the row object to use when extracting the value for the column.
enableSorting	boolean	Use the sort property on a defined column
enableHiding	boolean	Determines whether the column will be shown or not.
filter	React.FC<TableFilterProps>	You can filter the columns by using ready filter components.
cell	ColumnDefTemplate<CellContext<TData, TValue>>	You should use this column to use the data in the column in different formats.

---

Filter

Search

You can use the Table.Filter.Search component below for full text search.

<Table.Filter.Search title="Search Title" />

How to use:

<Table.Column
    ...
    filter={(props: TableFilterProps) => (
        <Table.Filter.Search {...props} title="Search Title" />
    )}
/>

Dropdown

You can use the Table.Filter.Dropdown component below for dropdown.

<Table.Filter.Dropdown
    options={[
        {
            label: "Published",
            value: "published",
        },
        {
            label: "Draft",
            value: "draft",
        },
        {
            label: "Rejected",
            value: "rejected",
        },
    ]}
/>

How to use:

<Table.Column
    ...
    filter={(props: TableFilterProps) => (
        <Table.Filter.Dropdown
            {...props}
            options={[
                {
                    label: "Published",
                    value: "published",
                },
                {
                    label: "Draft",
                    value: "draft",
                },
                {
                    label: "Rejected",
                    value: "rejected",
                },
            ]}
        />
    )}
/>

Dropdown

You can use the Table.Filter.DateRangePicker component below for DateRangePicker.

<Table.Filter.DateRangePicker {...props} align="end" />

How to use:

<Table.Column
    ...
    filter={(props: TableFilterProps) => (
        <Table.Filter.DateRangePicker {...props} align="end" />
    )}
/>

Actions

You can use the component prepared by default by using the component below to add a button etc. for action operation to each column in the table. Another option is to create a custom component with fragment or div.

<Table.Actions>{/* Table Action Buttons are here. */}</Table.Actions>

How to use:

<Table.Column
    ...
    cell={({ row: { original } }) => (
        <Table.Actions>
            <Table.ShowAction
                title="Detail"
                row={original}
                resource="posts"
                icon={<Eye size={16} />}
            />
            <Table.EditAction
                title="Edit"
                row={original}
                resource="posts"
                icon={<Edit size={16} />}
            />
            <Table.DeleteAction
                title="Delete"
                row={original}
                withForceDelete={true}
                resource="posts"
                icon={<Trash2 size={16} />}
            />
        </Table.Actions>
    )}
/>