payload-table-field's Introduction

Payload Table Field

Adds a table field (using React Table) to Payload.

Features:

Display / Edit data using React Table
Pagination
Sorting
Row Selection

Installation

  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.

// 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.

payload-table-field's People

Contributors

Stargazers

Watchers

payload-table-field's Issues

SyntaxError: Cannot use import statement outside a module

Hello!

Wanted to use this plugin, but I can't get it running.

Using it like this:

import { tableField } from "payload-table-field";
import { type Block } from "payload/types";

export const TableBlock: Block = {
  slug: "Table",
  interfaceName: "TableBlock",
  fields: [
    {
      name: "items",
      type: "array",
      required: true,
      fields: [
        tableField(
          {
            name: "table",
            label: "Table",
          },
          {
            pagination: true,
            paginationPageSize: 10,
            paginationPageSizes: [5, 10, 25, 50, 100],
            editable: false,
            rowSelection: true,
            columns: [
              {
                key: "id",
                name: "ID",
                enableSorting: true,
              },
              { key: "title", name: "Title" },
              { key: "year", name: "Year" },
            ],
          },
        ),
      ],
    },
  ],
};

but getting this error:

/Users/user/dev/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/payload-table-field/src/index.ts:1
import { Field, JSONField } from 'payload/dist/exports/types'
^^^^^^
@nextgen/cms:dev:
SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/user/dev/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/Users/user/dev/apps/cms/src/blocks/Table.ts:11:26)

Recommend Projects