Masked field in lighting-datatable

Question

I am new to LWC, so looking for some help over here related to one scenario. I am using lightning-datatable to show set of records on the page where one column field to be displayed as masked field like "*****57463" and when we hover on that field we need to show full value such as 1234657463. I havent coded yet looking for suggestion like is it possible with lightning-datatable or not. If yes please guide me.

If not then alternative solution will be using table and loop the records and on that column value will be using other component to display masked value and on hover display full value on the column.

Thanks in advance.

Answer 1

This can be achieved by html table and css:

In the JavaScript file, setup the records list by creating a maskedValue property something like below:

  records = [
    {
      maskedField: {
        value: '12345678',
        maskedValue: '******78'
      },
      //..other properties
    },
    {
      maskedField: {
        value: 'abcdefgh',
        maskedValue: '******gh'
      },
      //..other properties
    },
    //..other records
  ];

In the HTML, create a table and loop through the records and add both masked and unmasked values.

  <table>
    <!--thead></thead-->
    <tbody>
      <template for:each={records} for:item="record">
        <tr key={index}>
          <td>
            <div class="has-masked-field">
              <span class="non-masked-value">{record.maskedField.value}</span>
              <span class="masked-value">{record.maskedField.maskedValue}</span>
            </div>
          </td>
        </tr>
      </template>
    </tbody>
  </table>

In the CSS, hide the masked-value by default. On hover hide the masked-value and show the non-masked-value.

.has-masked-field .non-masked-value {
  display: none;
}

.has-masked-field:hover .masked-value {
  display: none;
}
.has-masked-field:hover .non-masked-value {
  display: initial;
}