README

此Bundle提供用于Doctrine实体的简单react-table配置。您可以选择在JavaScript中创建自己的列。

ReactTableBundle使用React Table v6。 (React Table v7是无头组件，意味着没有CSS和布局。我不是CSS专家，所以目前还在使用v6。一旦v7准备好flex布局，此Bundle可以轻松适配，因为列的API非常相似。)

高度受到SgDatatablesBundle的启发。

该项目目前仍在开发中。不能排除配置变更的可能性。

何时不应使用ReactTableBundle

ReactTableBundle旨在用于与实体紧密相关的简单表格。如果您正在创建高度定制的表格，其中包含许多组件和大量客户端编程，ReactTableBundle可能不适用。然而，当然可以在您的复杂表格中使用ReactTableBundle。

功能

PHP中的表格配置
过滤*
排序*
分页*
将表格状态（排序、过滤、当前页面等）持久保存在cookie中
列类型： TextColumn、BooleanColumn、DateTimeColumn、ActionColumn
使用OwnColumn自定义列

*服务器端

安装

步骤1：下载Bundle

打开命令行，进入您的项目目录并执行以下命令以下载此Bundle

$ composer require hello-sebastian/react-table-bundle

步骤2：启用Bundle（无需flex）

然后，通过将其添加到项目config/bundles.php文件中注册的Bundle列表中启用Bundle

// config/bundles.php

return [
    // ...
    HelloSebastian\ReactTableBundle\ReactTableBundle::class => ['all' => true],
];

步骤3：Assetic配置

安装Web资源

# if possible, make absolute symlinks (best practice) in public/ if not, make a hard copy

$ php bin/console assets:install --symlink

# make a hard copy of assets in public/

$ php bin/console assets:install

将资源添加到您的base.html.twig中

<link rel="stylesheet" href="{{ asset('bundles/reacttable/app.css') }}">
<script src="{{ asset('bundles/reacttable/app.js') }}"></script>

您的第一个表格

步骤1：创建一个ReactTable类

// src/ReactTable/UserTable.php

<?php

namespace App\ReactTable;

use App\Entity\User;
use HelloSebastian\ReactTableBundle\Columns\ActionColumn;
use HelloSebastian\ReactTableBundle\Columns\BooleanColumn;
use HelloSebastian\ReactTableBundle\Columns\ColumnBuilder;
use HelloSebastian\ReactTableBundle\Columns\DateTimeColumn;
use HelloSebastian\ReactTableBundle\Columns\TextColumn;
use HelloSebastian\ReactTableBundle\Data\ActionButton;
use HelloSebastian\ReactTableBundle\Filter\SelectFilter;
use HelloSebastian\ReactTableBundle\ReactTable;

class UserTable extends ReactTable
{
    /**
     * @inheritDoc
     */
    protected function buildColumns(ColumnBuilder $builder)
    {
        $columnBuilder
            ->add('username', TextColumn::class, array(
                'Header' => 'Username'
            ))
            ->add('email', TextColumn::class, array(
                'Header' => 'E-Mail',
                'show' => false
            ))
            ->add('firstName', TextColumn::class, array(
                'Header' => 'First name'
            ))
            ->add('lastName', TextColumn::class, array(
                'Header' => 'Last name'
            ))
            ->add('createdAt', DateTimeColumn::class, array(
                'Header' => 'Created at',
                'format' => 'd.m.Y'
            ))
            ->add('department.name', TextColumn::class, array(
                'Header' => 'Department',
                'emptyData' => 'No Department',
                'filter' => array(SelectFilter::class, array(
                    'choices' => array(
                        'IT' => 'IT',
                        'Sales' => 'Sales'
                    )
                ))
            ))
            ->add('department.costCentre.name', TextColumn::class, array(
                'Header' => 'Cost Centre',
                'emptyData' => 'No Cost Centre',
                'filter' => array(SelectFilter::class, array(
                    'choices' => array(
                        '001' => '001',
                        '002' => '002',
                      	'null' => 'empty'
                    )
                ))
            ))
            ->add('isActive', BooleanColumn::class, array(
                'Header' => 'is active',
                'trueValue' => 'yes'
            ))
            ->add(null, ActionColumn::class, array(
                'Header' => 'Actions',
                'width' => 120,
                'buttons' => array(
                    array(
                        'displayName' => 'show',
                        'routeName' => 'show_user',
                        'additionalClassNames' => 'btn-success'
                    ),
                    array(
                        'displayName' => 'edit',
                        'routeName' => 'edit_user'
                    )
                )
            ));
    }

    protected function getEntityClass(): string
    {
        return User::class;
    }
}

步骤2：在控制器中

// src/Controller/UserController.php

// ...
use HelloSebastian\ReactTableBundle\ReactTableFactory;
// ...

/**
 * @Route("/", name="default")
 */
public function index(Request $request, ReactTableFactory $reactTableFactory) : Response
{
    $table = $reactTableFactory->create(UserTable::class);

    $table->handleRequest($request);
    if ($table->isCallback()) {
        return $table->getResponse();
    }

    return $this->render('index.html.twig', array(
        'table' => $table->createView()
    ));
}

步骤3：在模板中添加表格

{% extends 'base.html.twig' %}

{% block body %}
    <div class="react-table-bundle" data-table="{{ table }}"></div>
{% endblock %}

列

TextColumn

表示包含文本的列。

选项

示例

->add('username', TextColumn::class, array(
    'Header' => 'Username',
  	'emptyData' => "No Username found.",
  
    //optional overrides ...
  	'dataCallback' => function (User $user) { //entity class from getEntityClass
        //you can return what ever you want ... but only string or number  
        return $user->getId() . " " . $user->getUsername();
    },
  	'sortQuery' => function (QueryBuilder $qb, $direction) {
        $qb->addOrderBy('username', $direction);
    },
  	'filter' => array(TextFilter::class, array(
    	'placeholder' => 'Search ...',
      	'filterQuery' => function (QueryBuilder $qb, $field, $value) {
            //add custom expressions to QueryBuilder ...
          	//field = "username"
          	//value = text from filter
        }
    ))
))

BooleanColumn

表示包含布尔值的列。

选项

所有TextColumn选项

默认情况下，选项filter设置为SelectFilter。

并且:

示例

->add('isActive', BooleanColumn::class, array(
    'Header' => 'is active',
    'trueLabel' => 'yes',
    'falseLabel' => 'no'
))

DateTimeColumn

表示包含DateType值的列。

选项

所有TextColumn选项

并且

示例

->add('createdAt', DateTimeColumn::class, array(
    'Header' => 'Created at',
    'format' => 'd.m.Y'
))

OwnColumn

使用OwnColumn，您可以向表格提供自定义数据和JavaScript配置。例如，您可以使用OwnColumn创建一个图像或链接列。

选项

所有TextColumn选项。

sortable和filterable默认禁用。如果您想启用，必须提供自定义的sortQuery和filter与filterQuery。

dataCallback是必需的。

示例

PHP中的表格配置

->add("custom", OwnColumn::class, array(
    'Header' => 'My Column',
    'dataCallback' => function (User $user) {
        return "Hello";
    },
    'sortQuery' => function (QueryBuilder $qb, $direction) {
      	
    }
))

在JavaScript中扩展表格配置

在您的 base.html.twig 中，在您包含包JS文件之前，您可以监听自定义事件 rtb:componentDidMount。在事件内部，您可以访问JavaScript列对象的数组。

document.addEventListener("rtb:componentDidMount", function (e) {
  e.detail.persistenceOptions.filtered = false; //see Persistence Options

  //loop over all columns and filter by type "own". If you have multiply OwnColumns you must extend the filtering
  
  //Then you can set and access all provided attributes by react-table. E.g. React Cell, Footer, Header, Filter - components ...
  
  e.detail.columns.forEach(col => {
    if (col.type === "own") {
      col.Header = "Custom Column";
      col.show = true;

      col.Cell = (row) => { //row is provided by react-table
        //if you import React you can render a customer component here as well.
        // return <MyCell row={row} />;
        return row.original.username;
      }
    }
  });
});

操作列

表示用于操作按钮（显示/编辑/删除等）的列。

选项

所有TextColumn选项

sortable 和 filterable 默认禁用。

并且

示例

->add(null, ActionColumn::class, array(
    'Header' => 'Actions',
    'width' => 120, //optional
    'buttons' => array(
        array(
            'displayName' => 'show',
            'routeName' => 'show_user',
            'additionalClassNames' => 'btn-success'
        ),
        array(
            'displayName' => 'edit',
            'routeName' => 'edit_user',
            'additionalClassNames' => 'btn-success'
       )
  	)
))

操作按钮

YAML 配置

# config/packages/react_table.yaml

react_table:
	# other configuration ...
	default_column_options:
        action_column:
            default_class_names: 'btn btn-xs'

配置

表格属性

表格属性直接提供给 ReactTable，是一组表格设置选项。

选项

您可以通过 YAML 文件对所有表格进行设置，或为每个单独的表格进行设置。

YAML-配置

// config/packages/react_table.yaml

react_table:
    default_table_props:
        className: "-striped -highlight"
        sortable: false

PHP-配置

在表格类内部

// src/ReactTable/UserTable.php

class UserTable extends ReactTable
{
    ...

    public function configureTableProps(OptionsResolver $resolver)
    {
        parent::configureTableProps($resolver);
    
        $resolver->setDefaults(array(
            'defaultPageSize' => 10
        ));
    }
}

在表格类外部

// src/Controller/UserController.php

public function index(Request $request, ReactTableFactory $reactTableFactory) : Response
{
    $table = $reactTableFactory->create(UserTable::class);

    $table->setTableProps(array(
        'defaultPageSize' => 10
    ));

    ...
}

在 configureTableProps 方法中，您可以指定可以直接提供给 ReactTable 的自定义数据。

持久化选项

选项

使用持久化选项，您可以设置哪些设置（过滤、排序、当前页等）应存储在 cookies 中。默认情况下，所有这些都被激活。

YAML-配置

// config/packages/react_table.yaml
react_table:
    default_persistence_options:
        sorted: true

PHP-配置

在表格类内部

// src/ReactTable/UserTable.php

class UserTable extends ReactTable
{
    ...

    public function configurePersistenceOptions(OptionsResolver $resolver)
    {
        parent::configurePersistenceOptions($resolver);

        $resolver->setDefaults(array(
            'sorted' => false
        ));
    }
}

在表格类外部

// src/Controller/UserController.php

public function index(Request $request, ReactTableFactory $reactTableFactory) : Response
{
    $table = $reactTableFactory->create(UserTable::class);

    $table->setPersistenceOptions(array(
        'page' => true
    ));

    ...
}

待办事项

文档
- 更多示例
用于渲染 div 元素的 Twig 扩展
测试
- 单元测试

hello-sebastian / react-table-bundle

维护者

详细信息

README

何时不应使用ReactTableBundle

概述

功能

安装

步骤1：下载Bundle

步骤2：启用Bundle（无需flex）

步骤3：Assetic配置

安装Web资源

将资源添加到您的base.html.twig中

您的第一个表格

步骤1：创建一个ReactTable类

步骤2：在控制器中

步骤3：在模板中添加表格

列

TextColumn

选项

示例

BooleanColumn

选项

示例

DateTimeColumn

选项

示例

OwnColumn

选项

示例

操作列

选项

示例

操作按钮

配置

表格属性

选项

YAML-配置

PHP-配置

持久化选项

选项

YAML-配置

PHP-配置

待办事项