Base functions in class Syntax are doing nothing.

[Mervus]

I am using the https://komarovalexander.github.io/ka-table/#/class-component Syntax but in my Project Sorting loading and all other base functions did not work. I wrote loading myself but its a pain. For example:
this.dispatch(hideLoading); and this.dispatch(showLoading); are doing nothing instead i had to manually create a switch case in the dispatch() function and do this.state.loading.enabled = true;.
Now my problem is enabling Sorting its not working.
I did as shown https://komarovalexander.github.io/ka-table/#/sorting and comparised my script with the JS Example.

I tryed to play around with the sortIcon if statement but nothing worked.

import {Component} from "react";
import {kaReducer, Table} from 'ka-table';
import {ActionType, DataType, EditingMode, FilteringMode, SortDirection, SortingMode} from 'ka-table/enums';

import {
    hideLoading, loadData, search,
    setSingleAction,
    showLoading,
    updateData,
    updatePageIndex,
    updatePagesCount
} from 'ka-table/actionCreators';

const bootstrapChildComponents = {
    table: {
        elementAttributes: () => ({
            className: 'table table-striped table-hover table-bordered'
        })
    },
    tableHead: {
        elementAttributes: () => ({
            className: 'thead-dark'
        })
    },
    noDataRow: {
        content: () => 'No Data Found'
    },
    filterRowCell: {

    },
    cellEditorInput: {
        elementAttributes: ({column}) => ({
            className: column.dataType === DataType.Boolean ? 'form-check-input' : undefined
        }),
    },
    pagingIndex: {
        elementAttributes: ({ isActive }) => ({
            className: `page-item ${(isActive ? 'active' : '')}`
        }),
        content: ({ text, isActive }) => <div className={`page-link ${(isActive ? 'active' : '')}`}>{text}</div>
    },
    pagingPages: {
        elementAttributes: () => ({
            className: 'pagination'
        }),
    },
    sortIcon: {
        content: ({ column }) => {
            if (column.key === 'name') {
                const up = '................ Not important for now';
                const down = '................ Not important for now';
                return <img src={column.sortDirection === SortDirection.Ascend ? up : down} style={{width: 12, position: 'relative', top: 1}} alt='sort direction' />;
            }
        }
    }
}
class GridComponent extends Component {
    constructor(props, table) {
        super(props);

        this.state = {
            table: table,
            columns: [],
            format: ({ column, value }) => {
                if (column.dataType === DataType.Date){
                    return value && value.toLocaleDateString('de', {month: '2-digit', day: '2-digit', year: 'numeric' });
                }
            },
            data: [],
            filter: '',
            loading: {
                enabled: true,
                text: "Bitte warten ..."
            },

            //singleAction: this.loadData(),
            search: '',
            paging: {
                enabled: true,
                position: 'bottom',
                pageIndex: 0,
                pageSize: 20,
                pagesCount: 0,
            },

            filteredCount: 0,
            totalCount: 0,
            //singleAction: loadData(),
            //filteringMode: FilteringMode.FilterRow,
            editingMode: EditingMode.Cell,
            rowKeyField: 'id',
            sortingMode: SortingMode.Single,
        };

        this.createColumnDefs()
        this.loadData()

        this.dispatch = this.dispatch.bind(this);


    }

    createColumnDefs() {
          axios.get('api/columndefs/' + this.state.table).then(response => {
              this.setState({columns: response.data})
              //this.state.columns = response.data
              console.log(response.data)

        })

    }

    saveColumndefs(){
        axios.post('api/columndefs/kontakte',
            {data: this.state.columns},
        )
    }

    onFilterTextBoxChanged(event){
        this.state.search = event.target.value

        console.log(this.state)
        if (event.target.value.length >= 3 || event.target.value.length === 0)
            this.dispatch(loadData());

    }

    loadData(){
        return axios.get('api/' + this.state.table, {
            params: {
                pageIndex: this.state.paging.pageIndex,
                pageSize: this.state.paging.pageSize,
                filter: this.state.filter,
                search: this.state.search,
            }
        })
        .then(response => {
            console.log('loadData finished');
            this.setTableState(response);

            console.log(response.data)
            return response
        })

    }

    setTableState(response){
        this.setState({data: response.data.data})
        this.state.paging.pageIndex = response.data.pageIndex;
        this.state.paging.pagesCount = response.data.pagesCount;
        this.state.filteredCount = response.data.filteredCount;
        if (this.state.filter == '') {
            this.state.totalCount = response.data.filteredCount;
        }
        //this.dispatch(hideLoading) funktioniert nicht
        this.state.loading.enabled = false;


        this.dispatch(updatePagesCount(response.data.count))
    }


    renderGrid() {
        return (
            <>
                <div>
                    <Table
                        {...this.state}
                        childComponents={
                            bootstrapChildComponents
                        }
                        dispatch={this.dispatch}
                    />
                </div>
            </>
        )
    }


    dispatch(action) {
        switch (action.type){
            case ActionType.LoadData:
                console.log('loadData start');
                this.state.loading.enabled = true;
                this.loadData()
                console.log('loadData end');

                break;

            case ActionType.UpdatePageIndex:
                console.log("updatePageIndex")
                this.state.paging.pageIndex = action.pageIndex

                this.dispatch(loadData())
                this.dispatch(setSingleAction(loadData));
                break;

            case ActionType.HideLoading:
                this.state.loading.enabled = false;
                console.log('hide loading');
                break;
        }

        this.setState((prevState) => ({
             ...prevState,
             ...{tableProps: kaReducer(prevState, action)}
         }));
    }
}


export default GridComponent;

[komarovalexander]

Hi instead of this.dispatch(hideLoading); tou have to do this.dispatch(hideLoading()); do not forget () for action creator

[Mervus]

Yea Thanks but why do i have to do

case ActionType.HideLoading:
          this.state.loading.enabled = false;
          break;

for it to work.
Here its working without extra logic.
https://komarovalexander.github.io/ka-table/#/remote-data

HideLoading() is working fine. hideLoading is run i tested it with

if (action.type == ActionType.HideLoading){ console.log("is run") }
but i had to use
case ActionType.HideLoading: this.state.loading.enabled = false; break;

dispatch(action) {
        switch (action.type){
            case ActionType.LoadData:
                console.log('loadData start');
                this.dispatch(showLoading())
                this.loadData()
                console.log('loadData end');

                this.dispatch(hideLoading())

                break;

            case ActionType.UpdatePageIndex:
                console.log("updatePageIndex")
                this.state.paging.pageIndex = action.pageIndex

                this.dispatch(loadData())

                break;
        }

        this.setState((prevState) => ({
             ...prevState,
             ...{tableProps: kaReducer(prevState, action)}
         }));
    }

Its fine tho i got it working. I was just wondering. The issue goes with other Base functions too. for example i had to manually do ActionType.UpdateSortDirection logic.

[komarovalexander]

@Mervus can I ask you to reproduce that behavior on stackblitz? https://stackblitz.com/edit/table-class-component-ts?file=Demo.tsx and provide the link to that here