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

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

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>