yii-react-gridview

Yii2 GridView widget for react

This component is created to simplify moving from php rendering of built-in Yii2 Gridview widget to React-based application using some of its familiar settings.

Simple example

Installing

npm install --save yii-react-gridview

Setting props

Instead of using pager or dataProvider objects as it used in Yii2 Gridview widget, some of its properties (or equivalents) should be set as props directly in GridView component. It makes more suitable way for React of re-rendering the component in case if some prop will be changed. See Available props to find out how to set up your GridView.

Example

of component:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import GridView from 'yii-react-gridview';
import Axios from 'axios';
 
class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      data: null,
    };
    Axios.get('/your/get-data').then(response => {
      let dataProvider = response.data;
      this.pageSize = dataProvider.pageSize;
      this.headerCells = dataProvider.headerCells;
      this.maxButtonCount = dataProvider.maxButtonCount;
      this.setState({
        data: dataProvider.data,
        currentPage: dataProvider.currentPage,
        totalCount: dataProvider.totalCount,
      });
    });
 
    this.columns = {
      username: null,
      email: null,
      city: null,
    }
  }
  
  onPageButtonClicked = (currentPage) =>  {
    Axios.get('/your/get-data').then(response => {
      this.setState({
        currentPage: currentPage,
        //...
      });
    })
  };
  
  onSortChanged = (sort) =>  {
    this.setState({sort: sort});
    Axios.get('/your/get-data', {
      params: {
        // Pass 'sort' as is (js-object) or prepare it to be compatible with Query::orderBy()
        orderBy: sort,
        //...
      }
    }).then(response => {
      this.setState({
        //...
      });
    });
  };
  
  render() {
    return (
      <div className="App">
        <GridView
          data={ this.state.data }
          headerCells={ this.headerCells }
          columns={ this.columns }
          currentPage={ this.state.currentPage }
          totalCount={this.state.totalCount}
          maxButtonCount={ this.maxButtonCount }
          pageSize={this.pageSize }
          onPageButtonClick={ this.onPageButtonClicked }
          onSortChange={ this.onSortChanged }
        />
      </div>
    );
  }
}
 
ReactDOM.render(<App/>, document.getElementById('root'));

of action:

class YourController extends Controller {
    public function actionGetData($currentPage = 0, $pageSize = 20, $filters = [], $orderBy = '') {
        \Yii::$app->response->format = Response::FORMAT_JSON;
        
        // Prepare orderBy object here or do it in 'onSortChange' callback
        // Anyway make it compatible with '->orderBy($orderBy)'
        $preparedOrderBy = [];
        if ($orderBy) {
            foreach (Json::decode($orderBy) as $col => $sort) {
                $preparedOrderBy[] = "{$col} {$sort}";
            }
            if (!empty($preparedOrderBy)) {
                $preparedOrderBy = implode(',', $preparedOrderBy);
            }
        }
        // Probably $filters should be also prepared
        // ...
        
        return [
            'data' => ArrayHelper::toArray(User::find()
                ->andFilterWhere($filters)
                ->offset($currentPage * $pageSize)
                ->orderBy($preparedOrderBy)
                ->limit($pageSize)
                ->all(), [
                User::class => [
                    'username',
                    'email',
                    'city',
                ]
            ]),
            'headerCells' => (new User)->attributeLabels(),
            'currentPage' => (int) $currentPage,
            'totalCount' => (int) User::find()->andFilterWhere($filters)->count(),
            'pageSize' => $pageSize,
        ];
    }        
}
 

Available props

Property	Type	Default value	Description
data	Array	undefined	Array of models to show in list
notSetText	string	'(not set)'	Text will be shown when a cell in a row is not set
headerCells	Object	{}	Key-value pairs of names of data models properties. It should contain the same keys as keys of an Object in data. Values of headerCells could be either strings or object of following structure: { value: 'Column Title', column: 'attrbute_name', enableSorting: true, sort: 'ASC' }. If enableSorting is true then column required. sort (if specified) must be either 'ASC' or 'DESC'
footerCells	Array	[]	Array of strings or components corresponding cells of tfoot-row. Make sure the array length match the table
caption	String	undefined	A string for caption if necessary
emptyCaption	String	'Nothing found'	The text will be shown when no data rows are loaded
captionOptions	Object	{}	HTML attributes of caption
containerOptions	Object	{}	HTML attributes of GridView instance conteiner (div that wraping the table and the pager)
tableOptions	Object	{}	HTML attributes of table
showHeader	Boolean	true	Whether show <thead> or not
showFooter	Boolean	false	Whether show <tfoot> or not
hidePager	Boolean	false	Whether show pager buttons or not
placeFooterAfterBody	Boolean	true	Whether place <tfoot> after body or not
headerRowOptions	Object	{}	HTML attributes of thead > row
footerRowOptions	Object	{}	HTML attributes of tfoot > row
rowOptions	Object	{}	HTML attributes of tbody > row
columns	Object	undefined	Keys of the object are whether properties of a model in data (then the title will be provided by headerCells) or custom strings that will be a column titles. Values of the object are either null (to provide a model value as is) or function (cell, rowId, hoveredRowId) (to decorate a model value with its result). Also string 'serial' can be set to provide models numeration. If 'checkbox' is set as a key and its value (just value at least) then column of checkboxes will be rendered in order to select row(s) ids (a value that specified in rowIdColumn)
filters	Object	null	Contain filters for specified columns. Filters can be: a) string 'text' renders simple input of type="text"; b) Object { type: ..., options: {...} } where type can be either 'text' (input of type="text"), 'checkbox' or 'select'. Options typically are HTML attributes of the inputs. If type is 'select' then options should contain data - object of options (where key is value attribute of an <option> and value is its text); c) function (name, onChange) to render custom input with name={ name } and onChange={ onChange } (must return a React.Component/html)
onSortChange	function(sort)	undefined	Callback to sort the data with sort - key-value object (js { column:'ASC' /* or 'DESC' */ }) to sort the data. The way of is up to you
onFilterChange	function(filters)	undefined	Callback to filter the data with filters - key-value object to filter the data. Required when filters are specified. The way of filtering depends on you
pagerOptions	object	undefined	HTML attributes of pager container
currentPage	integer	undefined	Number of current page (begins from 0). Should be provided by data provider
totalCount	integer	undefined	Total count of models given in data. Should be provided by data provider
maxButtonCount	integer	10	Max count of pager links
pageSize	integer	20	Max count of models on a page
pagerTag	string	'ul'	Tag name of pager container
pageTag	string	'li'	Tag name of pager link
activePageCssClass	string	'active'	Class name of active page link
disabledPageCssClass	string	'disabled'	Class name of disabled pager link
nextPageCssClass	string	'next'	Class name of 'next' page link
prevPageCssClass	string	'prev'	Class name of 'previous' page link
firstPageCssClass	string	'first'	Class name of 'first' page link
lastPageCssClass	string	'last'	Class name of 'last' page link
nextPageLabel	string	'»'	Label of 'next' page link
prevPageLabel	string	'«'	Label of 'previous' page link
firstPageLabel	string	null	Label of 'first' page link
lastPageLabel	string	null	Label of 'last' page link
onPageButtonClick	function(pageNumber)	null	Callback of click on pager link with given page number. Originally it should replace pageNumber with its page number and reload the data, but it's up to you whatever it does.
onSelectionChange	function(selectedRowIds)	null	Callback which will be applied when a row is (or all rows are) selected. Array of selected values specified in rowIdColumn will be passed in selectedRowIds
rowIdColumn	string	'id'	Column name that could be used as primary key for selection. If onSelectionChange is set, then array of values of selected rowIdColumn will be passed as an argument