[SalesForce] lightning:datatable component cutting off actions drop down menu when it goes past the card and displays scrollbar instead

Why not trying a pure CSS solution with position:sticky?

https://developer.mozilla.org/en-US/docs/Web/CSS/position

<style>
    table.HeaderSticky thead th { 
        position: sticky;  top:150px; z-index:20000;
        background: #eee;
        border-bottom: silver solid 1px;
        box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.2);
        text-transform: initial;
    }
</style>
<table class="HeaderSticky">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some</td>
            <td>Content</td>
        </tr>           
        <!-- more trs here -->          
    </tbody>
</table>

If you are in LEX play around with different values for top. For communities top:0px worked for me. It has to be > 0 if the page contains other fixed or sticky elements which you don't want to overlap.

You can put all of it also inside a wrapping div having a max-height if you don't want it to apply to the entire page.

You want to use component.set("v.attributeName", c.variableName); from a method inside either your component controller or a helper. Doing that will set the values in every component that shares the attribute among your common components when you update the values in a component's controller. Otherwise, you need to use an event handler as recommended by the documentation.

Edit:

Okay, here's some more specifics to your use case that may help point you in the right direction without writing all your code for you. At a high-level, this is the general approach that you're going to want to take.

You're going to want to define and handle nested sub-tags that come from your sub components which are output by a parent component. Doing this requires implementing a "base tag" that typically is of a type Object[]. You'll use this in a init handler to aggregate sub-tag attributes into an array of objects which can be output using an <aura:iteration>.

Getting a bit more specific and practical to your application, you're probably going to want to create components with the following attributes:

DataGridColumn

type: string - type of widget to display in the column. Valid options would be test, checkbox or button with a default of text.

label: string.

class: string. Optional style class applied to each column cell

hidden: Boolean. True to hide column. Default is false.

DataGridRow

data: string. List of delmited data items

delimiter: string. Defaults to ",".

pKey: String. Required. Primary key of the record

DataGrid

(this is where you loop through the attributes with the subtags)

cols: Private Object[]. Used by controller to store aggregated info about grid columns from <c:DataGridColumn> tags.

rows: Private Object[]. Used by controller to store aggregated info about grid rows from <c:DataGridRow> tags.

DataGridTable

(generates HTML markup with SLDS classes to render the Grid)

cols: Global Object[]. Used to output column headers into SLDS grid.

rows: Global Object[]. Used to output column rows into SLDS grid.

You'll use attributes like the following immediately under your tag to define cols and rows, etc.

<aura:attribute name="cols"
                type="Object[]"
                access="PRIVATE"
                description="The grid columns." />

You can now use the tags to initialize the body of the grid and gridtable. When you do that, you will use component.set("v.cols",obj.cols) (and the equivalent for rows) in populating the object you'll define to hold the results for display in the body of your table component. In your subcomponents, you can "push" items onto a colItems or rowData array. You don't need to get anything from the outer component since all manipulation occurs in the inner components after which it is "pushed" to the outer component for display.

I hope this helps get you moving in the right direction with your components. Recognize that you'll need to create local variables in your subcomponents and will want to use "thisTag" as appropriate in your code.