how to make the data of column as a clickable in primeui datatable

Question

I am using an primeui datatable in my project, where i need an option for column clickable(i mean data inside the column must be clickable) if anyone have an idea how to make it, pls help me.

Thanks in advance

Welcome to stackoverflow :). Here whenever you post any question or query you need to post code or anything what else you tried before posting question. — user1140237, Jan 04 '16 at 06:42

score 0 · Accepted Answer · answered Jan 04 '16 at 10:18

You need to use content option of a column and return the clickable element.

var localData = [
            {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
            {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
            {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
            {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
            {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
            {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
            {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
            {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
            {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
            {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
        ];

        $('#tbllocal').puidatatable({
            caption: 'Local Datasource',
            columns: [
                {field: 'vin', headerText: 'Vin'},
                {field: 'brand', headerText: 'Brand', content: function(car) {return $('<a href="#">' + car.brand +'<a>')}},
                {field: 'year', headerText: 'Year'},
                {field: 'color', headerText: 'Color'}
            ],
            datasource: localData
        });

Markup would be;

<div id="tbllocal"></div>

The web component alternative in upcoming 3.0 would be;

<p-datatable datasource="DataDemo.loadAllCars" paginator rows="10" selectionmode="single" onrowselect="handleRowSelect">
        <p-column field="vin" headertext="Vin" sortable filter></p-column>
        <p-column field="year" headertext="Year" sortable filter></p-column>
        <p-column field="brand" headertext="Brand" sortable filter></p-column>
        <p-column field="color" headertext="Color" sortable filter> 
            <script type="x-tmpl-mustache">
                <a href="#">{{color}}</a>
            </script>
        </p-column>
    </p-datatable>

how to make the data of column as a clickable in primeui datatable

1 Answers1