[SalesForce] LWC – Why is the computed rowId for the custom data type in lighting-datatable undefined

I ended up resolving my issue and in doing so I believe that the documentation ( https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation) for 'Creating Custom Data Types' has a few errors. I have provided an explanation of one of these errors below.

I think my initial error lay in the belief that the 'value' property that's assigned to the attribute 'row-id' in buttonTemplate.html was a global property that we don't have to compute ourselves (this is the impression the documentation gave me as no value is set for in in the JavaScript). This may be the case and I may be using it wrong, but I couldn't figure out a solution. Instead, I used typeAttributes like so to assign a rowId myself.

Here is how I solved my rowId issue.

Assign row-id a value using typeAttributes:

buttonTemplate.html

<template>
    <c-my-two-buttons row-id={typeAttributes.rownumber}>
    </c-my-two-buttons>
</template>

Define this typeAttribute in the custom datatable:

buttonTemplate.js

import LightningDatatable from 'lightning/datatable';
 import buttons from './buttonTemplate.html';
 export default class customDatatble extends LightningDatatable {

            static customTypes = {
                buttonsToShow: {
                    template: buttons,
                    typeAttributes: ['rownumber']
                }
            };

        }

Finally, wherever you use the custom datatable, set the type attribute when you're setting the data:

myCustomDatatableImplementation.js

    import { LightningElement, track, api } from 'lwc';

const accountColumns = [
    { label: 'First Col', fieldName: 'firstCol', type: 'text'},
    { label: 'Second Col', fieldName: 'secondCol', type: 'text'},
    { label: 'Buttons', fieldName: 'buttons', type: 'buttons', typeAttributes: {
            rownumber: {fieldName: 'rowIndex'}
        }
    }
];

    export default class myCustomDatableImplementation extends LightningElement {

        @track columns = columns;
        @track data;

        // Get the accounts
        async connectedCallback() {
           // retrieve and set data
           // When data is retrived, iterate through it and set rownumber
           var i = 0;
           for(i; i < data.length; i++) { 
               data[i].rowIndex = i;
           }
        }

        // This handles the event dispatched from  
        // myTwoButtons.js when the first button is pressed
        handleFirstButtonPressed(event) {

            const { rowId } = event.detail;
            // rowId is undefined here

        }

         // This handles the event dispatched from  
        // myTwoButtons.js when the second button is pressed
        handleSecondButtonPressed(event) {
            const { rowId } = event.detail;
            // rowId is undefined here
        }


    }

You will now be able to dispatch the rowId up the hierarchy from the button pressed.

Now, here is why I believe the documentation may be erroneous. If I have misunderstood something, please let me know!

For example, the documentation states:

The wrapper component displays your custom datatable component.

<template>
    <demo-my-datatable
        key-field="id"
        data={data}
        columns={columns}
        ondeleterow={deleteRow}
        hide-checkbox-column>
    </demo-my-datatable>
</template>

This wrapper uses the following JavaScript class:

import { LightningElement, track } from 'lwc';
/* Import module that fetches data */
import fetchRecords from './fetchData';

const columns = [
    // Your column data here
    {
        label: '',
        type: 'deleteRowButton',
        fieldName: 'id',
        fixedWidth: 70,
        typeAttributes: {
          attrA: { fieldName: 'attrA' },
          attrB: { fieldName: 'attrB' },
        },
    },
];

export default class DatatableAppExExample extends LightningElement {
    @track data = [];
    @track columns = columns;

    connectedCallback() {
        fetchRecords(10).then(
          // Display your data
          // Set your attribute values (attrA, attrB, ...) here
        );
    }

    deleteRow(event) {
        const { rowId } = event.detail;
        // Remove the row
    }
}

It was my understanding that the markup must use the kebab case equivalent of it's JavaScript controller with 'c' prepended. Therefore the mark-up should be:

 <template>
        <c-datatable-app-ex-example
            key-field="id"
            data={data}
            columns={columns}
            ondeleterow={deleteRow}
            hide-checkbox-column>
        </c-datatable-app-ex-example>
    </template>

This is only one of the potential issues I've noticed.