Creating a custom lightning data table in LWC

In this article I will be showing a simple example on how to add an image icon column in your lightning data table component. By default only the utility icons are supported in the default implementation. To add your own custom icon follow the steps below —

Overview

Folder structures and output view

How the data table looks finally

LWC Components

HTML (main parent component)

JS (main parent component)

HTML (first child component main html)

HTML (first child component template html)

JS (first child component main js)

HTML (second child component main HTML)

JS (first child component main js)

Let me know in case you run into any issues. Refer to the github repository here.