Desperately waiting React version.

[SenerDemiral]

[csillag]

This is how I used this with React:

Preparation:

/*
  The react components are configured by HTML attributes, which must be strings.
  We are passing on this attributes when initializing the blaze templates.

  However, sometimes we need in other data types. (Numbers, booleans, arrays, or other JSON data.)
  Therefore, before passing on the data to the blaze templates, we need to convert them to the
  correct data types. This files defines functions to do that.
 */

let _parseBlazeArg = function (value) {
    try {
        /*
          Here, we try to interpret the string as JSON.
          (Besides actual JSON data, this also works for array, booleans and numbers.)

          Before the attempt to interpret the string as JSON, as preparation, we:
           - Replace single quotes with double qoutes.
           - Try to quote unquoted JSON. (ie. key: "value" ==> "key": "value"
         */
        return JSON.parse(value.replace(/'/g, "\"").replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:/g, '"$2": '));
    } catch (err) {
        return value;
    }
};

_parseBlazeArgs = function (args) {
    var result = {}
    for (let key of Object.keys(args)) {
        result[key] = _parseBlazeArg(args[key]);
    }
    return result;
};

AldeedTabular = React.createClass({
    componentDidMount() {
        let data = _parseBlazeArgs(this.props);
        data.table = TabularTables[this.props.table];
        this.view = Blaze.renderWithData(Template.tabular, data,
            ReactDOM.findDOMNode(this.refs.container));
    },
    componentWillUnmount() {
        Blaze.remove(this.view);
    },
    render() {
        return <span ref="container"/>;
    }
});

Data model (not related to React):

TabularTables.Users = new Tabular.Table({
    name: "Users",
    collection: Users,
    columns: [
        {data: 'firstName', title: 'First name'},
        {data: 'lastName', title: 'Last name'},
        {data: 'email', title: 'E-Mail'}
    ]
});

And finally:

<AldeedTabular table="Users" class="table table-striped table-bordered table-condensed"/>

[lionelromanelli]

Thanks @csillag!

[joetidee]

ok, I just wrapped the jQuery DataTables into a local ppackage for Meteor to consume and eventually got it working without the need for meteor-tabular

[zeroasterisk]

What I like about Tabular is the client+server configuration of auto pub/sub and it's reactive selector implementation... I'd really like to have at least that, in combo with datatables or griddle

[joshua1]

@csillag how would you handle template columns like a column with an action button . i.e {tmpl:Template.adminViewBooking}

[ducdev]

Thanks, that has made my day.

[thearabbit]

Have any official support React?

[thearabbit]

Could example how to use Template Cells on React Component?

{
  tmpl: Meteor.isClient && Template.bookCheckOutCell
}
------------
<template name="bookCheckOutCell">
  <button type="button" class="btn btn-xs check-out">Check Out</button>
</template>

[zeroasterisk]

FYI I ended up using kurounin:pagination and wrapping my own high-order-component + UI for react, split off into versions for custom whatever (lists), tables via giddle (no longer using now), and crazy AGGrid... worked pretty well...

[cdolek]

You can also use gadicc:blaze-react-component

render() {
  return (
    <div className="col-xs-12">
      <Blaze
        template="tabular"
        table={Users}
        id="usersTable"
        class="responsive-table highlight"
      />
    </div>
  );
}

[addynaik]

@cdolek, @csillag - i tried both your recommendations and they work except one wierd defect -

Any thoughts on why it might be adding multiple page dropdowns?

[cdolek]

@port80labs I don't know about your code, but dom positioning info might help.

You can customize the positioning of feature elements like so:

TabularTables.Users = new Tabular.Table({
    name: "Users",
    dom: "<'row'<'col s12'i>><'row'<'col s12'tr>><'row'<'col s6'l><'col s6'p>>",
    collection: Users,
    columns: [
        {data: 'firstName', title: 'First name'},
        {data: 'lastName', title: 'Last name'},
        {data: 'email', title: 'E-Mail'}
    ]
});

This example creates:

<div class="row">
    <div class="col s12">{Information}</div>
</div>

<div class="row">
    <div class="col s12">{Table}{Processing}</div>
</div>

<div class="row">
    <div class="col s6">{Length Changing}</div>
    <div class="col s6">{Pagination}</div>
</div>