https://github.com/notchris/payload-table-field

A table field (React Table) for Payload
https://github.com/notchris/payload-table-field

payload-plugin payloadcms react-table table

Last synced: 6 months ago
JSON representation

A table field (React Table) for Payload

• Host: GitHub
• URL: https://github.com/notchris/payload-table-field
• Owner: notchris
• License: mit
• Created: 2024-03-05T23:35:08.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-06T01:21:09.000Z (over 1 year ago)
• Last Synced: 2025-07-19T07:27:46.816Z (6 months ago)
• Topics: payload-plugin, payloadcms, react-table, table
• Language: TypeScript
• Homepage: https://payloadcms.com/
• Size: 536 KB
• Stars: 18
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Payload Table Field

#### Adds a table field (using [React Table](https://tanstack.com/table/latest)) to [Payload](https://payloadcms.com/).

### Features:

- Display / Edit data using [React Table](https://tanstack.com/table/latest)

- Pagination

- Sorting

- Row Selection

![image](https://github.com/notchris/payload-table-field/blob/main/example.png?raw=true)

## Installation

```bash

  yarn add payload-table-field

  #OR

  npm i payload-table-field

```

## Basic Usage

Import the field and then use it in your payload collection fields array.

```ts

// import plugin

import { CollectionConfig, Field } from 'payload/types'

import { tableField } from 'payload-table-field'

import mockData from '../mocks/mockData'

const Examples: CollectionConfig = {

  slug: 'examples',

  admin: {

    useAsTitle: 'title',

  },

  fields: [

    {

      type: 'text',

      name: 'title',

    },

    tableField(

      {

        name: 'table_example',

        label: 'Example Table - Movies',

        defaultValue: mockData,

      },

      {

        pagination: true, // Enable pagination?

        paginationPageSize: 10, // Default pagination page size

        paginationPageSizes: [5, 10, 25, 50, 100], // Available pagination page sizes

        editable: false, // Allow cells to be edited?

        rowSelection: true, // Enable row selection

        columns: [

          {

            key: 'id',

            name: 'ID',

            enableSorting: true // Allow this column to be sorted

          },

          { key: 'title', name: 'Title' },

          { key: 'year', name: 'Year' },

        ],

      },

    ) as Field,

  ],

}

export default Examples

```

### Note

While this plugin is still in development, the basic feature set of React Table has been implemented.