Data Table

Data Table is a powerful table component build with scratch for VitNode. It's compatible with SSR, search, pagination and even in query state from the URL.

Preview

ID	Name
1	John Doe
2	Jane Doe 2

Usage

import { DataTable } from 'vitnode-frontend/components/ui/data-table';

<DataTable
  data={[
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe 2' },
  ]}
  columns={[
    { title: 'ID', id: 'id' },
    { title: 'Name', id: 'name' },
  ]}
  defaultSorting={{
    sortBy: 'id',
    sortDirection: 'desc',
  }}
/>

Examples

With Pagination

<DataTable

  pageInfo={{
    count: 2, 
    endCursor: 2, 
    hasNextPage: false, 
    hasPreviousPage: false, 
    startCursor: 1, 
    totalCount: 2, 

  }}
  data={[
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe 2' },
  ]}
  columns={[
    { title: 'ID', id: 'id' },
    { title: 'Name', id: 'name' },
  ]}
  defaultSorting={{
    sortBy: 'id',
    sortDirection: 'desc',
  }}
/>

Backend

You can read how to implement Pagination API here.

With Search

<DataTable
  searchPlaceholder="Search users..."
  data={[
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe 2' },
  ]}
  columns={[
    { title: 'ID', id: 'id' },
    { title: 'Name', id: 'name' },
  ]}
  defaultSorting={{
    sortBy: 'id',
    sortDirection: 'desc',
  }}
/>

With Custom Cell

<DataTable
  data={[
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe 2' },
  ]}
  columns={[
    { title: 'ID', id: 'id' },
    {
      title: 'Name',
      id: 'name',

      cell: ({ row }) => {
        return <span className="font-bold">{row.name}</span>; 

      },
    },
  ]}
  defaultSorting={{
    sortBy: 'id',
    sortDirection: 'desc',
  }}
/>

Actions

We created special column for actions. You can add buttons, links or any other components. Flex is used for the layout with gap.

<DataTable
  data={[
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe 2' },
  ]}
  columns={[
    { title: 'ID', id: 'id' },
    { title: 'Name', id: 'name' },
    {
      id: 'actions', 
      cell: ({ row }) => {
        return (
          <>
            <Button>Edit</Button>
            <Button>Delete</Button>
          </>
        );
      },
    },
  ]}
  defaultSorting={{
    sortBy: 'id',
    sortDirection: 'desc',
  }}
/>

With Sorting Column

<DataTable
  data={[
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe 2' },
  ]}
  columns={[
    { title: 'ID', id: 'id' },
    {
      title: 'Name',
      id: 'name',
      sortable: true, 
    },
  ]}
  defaultSorting={{
    sortBy: 'id',
    sortDirection: 'desc',
  }}
/>

Backend

You can read how to implement Sorting API here.

API Reference

Prop	Type	Default
`data`	`{ id: number; and others... }[]`	-
`columns`	`{ id: string; title: string; sortable?: boolean; cell?: ({ row: Data; data: Data[] }) => ReactNode; }[]`	-
`defaultSorting`	`{ sortBy: string; sortDirection: "asc" \| "desc"; }`	-
`searchPlaceholder`	`string`	-
`pageInfo`	`PageInfo from GraphQL`	-
`defaultPageSize`	`10 \| 20 \| 30 \| 40 \| 50`	`10`

Usage with Pagination API

Backend API

You can read how to implement Pagination API here.

Get data from API

Create getData function and privide in it the fetcher function.

example.tsx

import { fetcher } from 'vitnode-frontend/api/fetcher';
 
const getData = async (query: ShowLanguagesAdminQuery) => {
  const { data } = await fetcher<
    ShowLanguagesAdminObj,
    ShowLanguagesAdminQuery
  >({
    url: '/admin/core/languages',
    query,
    cache: 'force-cache',
  });
 
  return data;
};

Create the view

Create the view function with searchParams argument.

example.tsx

import { SearchParamsPagination } from 'vitnode-frontend/helpers/get-pagination-tool';
 
export const LangsCoreAdminView = async ({
  searchParams,
}: {
  searchParams: Promise<SearchParamsPagination>;
}) => {
  return <></>;
};

Get data with getPaginationTool

Use the getPaginationTool function to get the data and pagination information.

example.tsx

import {
  SearchParamsPagination,
  getPaginationTool, 
} from 'vitnode-frontend/helpers/get-pagination-tool';
 
export const LangsCoreAdminView = async ({
  searchParams,
}: {
  searchParams: Promise<SearchParamsPagination>;
}) => {

  const variables = await getPaginationTool({
    searchParams, 

  });

 
  const data = await getData(variables); 
 
  return <></>;
};

The getPaginationTool() function will automatically handle the pagination, search and sorting for you when you're using the DataTable component.

client-example.tsx

'use client';
 
export const ContentLangsCoreAdmin = ({
  edges,
  page_info,
}: ShowLanguagesAdminObj) => {
  return (
    <DataTable
      data={edges} 
      columns={[
        { title: 'ID', id: 'id' },
        { title: 'Name', id: 'name' },
      ]}
      defaultSorting={{
        sortBy: 'created_at',
        sortDirection: 'asc',
      }}
      pageInfo={page_info} 
    />
  );
};

Import DataTable into RSC

example.tsx

import { ContentLangsCoreAdmin } from './client-example'; 
 
export const LangsCoreAdminView = async ({
  searchParams,
}: {
  searchParams: Promise<SearchParamsPagination>;
}) => {
  return <></>; 
  return <ContentLangsCoreAdmin {...data} />; 
};

Usage with Sorting API

Backend API

You can read how to implement Sorting API here.

Pagination Required

Sorting system is based on Pagination. Please make sure you have implemented the pagination system before using the sorting system.

Provide enum in getPaginationTool

example.tsx

import { ShowExampleWelcomeSortEnum } from 'shared/plugins/{your_plugin_code}/example.enum'; 
 
const variables = await getPaginationTool({
  searchParams,
  sortEnum: ShowExampleWelcomeSortEnum, 
});

Set columns to sortable

client-example.tsx

<DataTable
  data={edges}
  columns={[
    { title: 'ID', id: 'id' },
    { title: 'Name', id: 'name' },
    { title: 'Created At', id: 'created_at', sortable: true }, 
  ]}
  defaultSorting={{
    sortBy: 'created_at',
    sortDirection: 'asc',
  }}
  pageInfo={page_info}
/>

Data Table

On this page