How to set content of the cell?

[krnbatta]

We have cellType and cellComponent property on column. I'm not able to figure out, how to use it. I have user model. For this one column, i want this content: <img src={{user.img}}> {{user.name}}

[buschtoens]

Use a cellComponent. Then in the component you can access the content of that cell via value.

{{!-- app/templates/components/user-cell.hbs --}}
<img src={{value.img}}> {{value.name}}

[krnbatta]

Thanks. Also, in the documentation, it is mentioned

{{#t.body as |body|}}
    {{#body.expanded-row as |row|}}
      Hello <b>{{row.firstName}}</b>
    {{/body.expanded-row}}
  {{/t.body}}

it automatically maps this row template to one that has valuePath as firstName? If that is true, can I directly use this, by passing value path as this?

[buschtoens]

The content block of {{#body.expanded-row}} is rendered after every row that is expanded. The row block parameter is that very row.

The expanded row has no notion of valuePath. In the example you can see, that the expanded row has no individual cells like regular rows.

[krnbatta]

What if i want to set content of the cell as something fixed? I have the following scenario: I have dynamic number of columns depending upon the property of the model. So, i am going like

let cols = [];
user.get('tasks').forEach((task) => {
  cols.push({
          label: `Task is${task.get('name')}`,
          valuePath: "What shall go here???", // or how to set fixed value.
// I want value of this particular cell to be task.get('time')
    });
});

[alexander-alvarez]

@krnbatta for

// I want value of this particular cell to be task.get('time')

tasks would be your rows, and then valuePath would be time

[krnbatta]

I was not able to explain the problem. This is what i want to convert to ember-light-table:

    <table class="table table-event">
      <thead>
        <tr>
          <th>Class</th>
          {{#each users.0.deadlines as |deadline|}}
            <th>Paid by {{deadline.date}}</th>
          {{else}}
            <th>Paid by {{users.0.task.startDate}}</th>
          {{/each}}
        </tr>
      </thead>

      <tbody>
        {{#each users as |user|}}
          <tr>
            <th scope="row">{{user.name}}</th>
            {{#each user.progress.deadlines as |deadline|}}
              <td>${{deadline.fee}}</td>
            {{else}}
              <td> ${{user.task.fee}} </td>
            {{/each}}
          </tr>
        {{/each}}
      </tbody>
    </table>

What can be component and template code for this?

[buschtoens]

From the markup that you've posted, I don't see any expanded rows. What I do see is a variable column count. You would basically have to construct your columns array in dependence of users.firstObject.deadlines.[]:

columns: computed('users.firstObject.deadlines.[]', function() {
  const nameColumn = { label: 'Class', valuePath: 'name' };
  const deadlines = get(this, 'users.firstObject.deadlines');

  if (isPresent(deadlines)) {
    const taskColumns = deadlines
      .mapBy('date')
      .map((label, i) => ({
        label,
        valuePath: `progress.deadlines.${i}.fee`
      }):
      return [nameColumn, ...taskColumns];
  } else {
    return [
      nameColumn,
      {
        label: get(this, 'users.firstObject.task.startDate'),
        valuePath: 'task.fee'
      }
    ];
  }
})

You'll probably want something like that.

[aaronlelevier]

Hi, I was reading through the above examples. Is it possible to pass a query param to a cellComponent?

For my use case, there's query param state that the table uses to filter. Then, when the user clicks a link to drill down to another table, I want them to be able to take the query param state with them.

Maybe there's another way to do this without using the cellComponent to transfer the query param to the link-to for the drill down table?

Sorry if this is a noob question!

Thank you!

[alexander-alvarez]

@aaronlelevier you can pass arbitrary data with http://offirgolan.github.io/ember-light-table/docs/classes/light-table.html#property_extra Does that help?

[aaronlelevier]

@alexander-alvarez that's exactly what I was looking for. Thank you!