Make DataTable into card grid

[bodyfarmer]

DataTable Module has everything features I wanted (filter, reorder, scroll, etc) except I'm looking for a grid output.

Is there a good way to edit the table template to make it into divs?

Thanks.

[sudheer]

Why can't you use dataGrid component

[bodyfarmer]

Why can't you use dataGrid component

I'm under the impression that DataGrid Component does not have the filter, sort, editable, etc. options built in? Are they easy to implement?

Thanks

[sudheer]

You are right. It doesn't make sense to have those features in dataGrid component. Have you tried to include Grid CSS styles in dataTable template.

[bodyfarmer]

I tried custom CSS on the table with some success. However, I'm not sure how to move the column filters outside of the DataTable? The global filter works outside of DataTable but column filters do not?

Also, with the popularity of Pinterest like grids, I think many ppl will greatly appreciate new features to the component.

[paulswan]

Column filters will work from outside the table. Here is an example of how you might do it:

Code: Select all

            <div class="ui-widget-header" style="padding:4px 10px; border-bottom: 0 none;">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="50" placeholder="Year Filter" (change)="dt.filter(yearFilter.value,'year','contains')" #yearFilter>
            </div>
            <p-dataTable #dt [value]="cars1" selectionMode="single" [(selection)]="selectedCar"
                [paginator]="true" [rows]="10" [responsive]="true">
                <p-header>List of Cars</p-header>
                <p-column field="vin" header="Vin" [sortable]="true"></p-column>
                <p-column field="year" header="Year" [sortable]="true"></p-column>
                <p-column field="brand" header="Brand" [sortable]="true"></p-column>
                <p-column field="color" header="Color" [sortable]="true"></p-column>
            </p-dataTable>

[bodyfarmer]

Column filters will work from outside the table. Here is an example of how you might do it:

Code: Select all

            <div class="ui-widget-header" style="padding:4px 10px; border-bottom: 0 none;">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="50" placeholder="Year Filter" (change)="dt.filter(yearFilter.value,'year','contains')" #yearFilter>
            </div>
            <p-dataTable #dt [value]="cars1" selectionMode="single" [(selection)]="selectedCar"
                [paginator]="true" [rows]="10" [responsive]="true">
                <p-header>List of Cars</p-header>
                <p-column field="vin" header="Vin" [sortable]="true"></p-column>
                <p-column field="year" header="Year" [sortable]="true"></p-column>
                <p-column field="brand" header="Brand" [sortable]="true"></p-column>
                <p-column field="color" header="Color" [sortable]="true"></p-column>
            </p-dataTable>

That works! Thanks a ton.