timeslot.cmp

<aura:component implements="lightning:availableForFlowScreens"  access="global">
    <aura:attribute name="mydata" type="conference360__Event__c[]"/>
    <aura:attribute name="selectedRows" type="conference360__Event__c[]"/>
    
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:attribute name="column1_label" type="String"/>
    <aura:attribute name="column1_fieldName" type="String"/>
    <aura:attribute name="column1_type" type="String"/>
    
    <aura:attribute name="column2_label" type="String"/>
    <aura:attribute name="column2_fieldName" type="String"/>
    <aura:attribute name="column2_type" type="String"/>
    
    <aura:attribute name="column3_label" type="String"/>
    <aura:attribute name="column3_fieldName" type="String"/>
    <aura:attribute name="column3_type" type="String"/>
    
    <aura:attribute name="column4_label" type="String"/>
    <aura:attribute name="column4_fieldName" type="String"/>
    <aura:attribute name="column4_type" type="String"/>
      
    <aura:handler name="init" value="{! this }" action="{! c.init }"/> 
    
    <div class="slds-p-around_large slds-p-top_large slds-p-right_large slds-p-bottom_large slds-p-left_large slds-card slds-card_boundary">
        <div>       
            <div class="slds-m-around_xx-small">
                <!-- Lightning Datatable -->
                <lightning:datatable data="{! v.mydata }" 
                                     columns="{! v.mycolumns }" 
                                     keyField="id"
                                     onrowselection="{! c.getSelectedName }"
                                     maxRowSelection="1"
                                     showRowNumberColumn="true"
                                     
                                     />      
            </div>
        </div>
    </div>    
    
</aura:component>

timeslot.css

.THIS .slds-truncate {
    text-overflow: inherit;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word; 
}

.THIS .slds-button_icon-bare{
display: none;
}

timeslot.design

<design:component label="Table - Conference Event">
    <design:attribute name="mydata" label="inputData"/>
    <design:attribute name="selectedRows" label="selectedRows" />
    
    <design:attribute name="column1_label" label="column1_label"/>
    <design:attribute name="column1_fieldName" label="column1_fieldName"/>
    <design:attribute name="column1_type" label="column1_type"/>
    
    <design:attribute name="column2_label" label="column2_label"/>
    <design:attribute name="column2_fieldName" label="column2_fieldName"/>
    <design:attribute name="column2_type" label="column2_type"/>
    
    <design:attribute name="column3_label" label="column3_label"/>
    <design:attribute name="column3_fieldName" label="column3_fieldName"/>
    <design:attribute name="column3_type" label="column3_type"/>
    
    <design:attribute name="column4_label" label="column4_label"/>
    <design:attribute name="column4_fieldName" label="column4_fieldName"/>
    <design:attribute name="column4_type" label="column4_type"/>
    
    
</design:component>

timeslot_Controller.js

({
    init: function (cmp, event, helper) {
        
        var column1Label = cmp.get('v.column1_label');
        var column1FieldName = cmp.get('v.column1_fieldName');
        var column1Type = cmp.get('v.column1_type');
        
        var column2Label = cmp.get('v.column2_label');
        var column2FieldName = cmp.get('v.column2_fieldName');
        var column2Type = cmp.get('v.column2_type');
        
        var column3Label = cmp.get('v.column3_label');
        var column3FieldName = cmp.get('v.column3_fieldName');
        var column3Type = cmp.get('v.column3_type');
        
        var column4Label = cmp.get('v.column4_label');
        var column4FieldName = cmp.get('v.column4_fieldName');
        var column4Type = cmp.get('v.column4_type');
        
        cmp.set('v.mycolumns', [
            {label: column1Label, fieldName: column1FieldName, type: column1Type, sortable: false, class:"slds-button_icon-bare"},
            {label: column2Label, fieldName: column2FieldName, type: column2Type, sortable: false, class:"slds-button_icon-bare"},
            {label: column3Label, fieldName: column3FieldName, type: 'date', sortable: false,
             typeAttributes: {
                 year: 'numeric',
                 month: 'short',
                 day: 'numeric',
             }
             , class:"slds-button_icon-bare"},
            {label: column4Label, fieldName: column4FieldName, type: column4Type, sortable: false,
             typeAttributes: {
                 hour: '2-digit',
                 minute: '2-digit'
             }
             , class:"slds-button_icon-bare"},
        ]);
            
            },
            
            getSelectedName: function (cmp, event) {
            //save the selected rows into a flow-accessible attribute
            var selectedRows = event.getParam('selectedRows');
            cmp.set("v.selectedRows", selectedRows);
            console.log("selectedRows: " + selectedRows);
            
            
            
            // Display that fieldName of the selected rows
            for (var i = 0; i < selectedRows.length; i++){
            //alert("You selected: " + selectedRows[i].opportunityName);
            }
            }
            })

timeslot_Helper.js

({
    sortData: function (cmp, fieldName, sortDirection) {
        var data = cmp.get("{! v.mydata }");
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        data.sort(this.sortBy(fieldName, reverse))
        cmp.set("{! v.mydata }", data);
    },
    sortBy: function (field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }
})