Semantic-UI Table, persistent sort

Is there a way to make Semantic-UI Table sort to be persistent across multiple component re-renders. For example if I sort ascending by column "Name" is there a way to make this sort stay applied even when my table parent component re-renders ?

Is there a way to do this without messing with table implementation ?

Based on your demand,I have created an example for you.And the output is like in the picture.

The input and checkbox in the bottom is simulating the user add data.After click on "Submit" button,the data will add in the Table in order automatically.The method to handle the data adding is like the below:

addDate1 = () => {

    const { column, data, direction} = this.state
    let addData = {
        name: this.state.inputName,
        age: this.state.inputAge,
        gender: this.state.gender
    }
    let newData = [...data,addData]
    if (!column){
        console.log('Please select a colume')
    } else if (column === 'name'){
        this.setState({
            column: 'name',
            data: _.sortBy(newData, ['name']),
            direction: 'ascending',
        })
    } else if (column === 'age'){
        this.setState({
            column: 'age',
            data: _.sortBy(newData, ['age']),
            direction: 'ascending',
        })
    } else if (column === 'gender'){
        this.setState({
            column: 'gender',
            data: _.sortBy(newData, ['gender']),
            direction: 'ascending',
        })
    } else {
        console.log('error')
    }
}

And the working example is in here: https://codesandbox.io/s/github/stackOverflow166/setable