Need private packages and team management tools?Check out npm Teams »

yii-react-gridview

0.5.14 • Public • Published

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

Install

npm i yii-react-gridview

DownloadsWeekly Downloads

8

Version

0.5.14

License

ISC

Unpacked Size

129 kB

Total Files

45

Last publish

Collaborators

  • avatar