material-table column sorting is not working when fetching remote data

[disatechconsulting]

I am rendering the following material-table (v 1.68.0) fetching remote data:

<MaterialTable
    title = 'Stock data'
    tableRef = {this.ticketsTableRef}
    icons = {tableIcons}
    columns = {columns}
    data = {query =>
        new Promise((resolve, reject) => {

            let url = SERVER_URL + '/stockquotes/api/v1/watchlist'

            fetch(url)
                .then(response => response.json())
                .then(result => {
                    resolve({
                        data: result.filter(function(obj) {
                            return Object.keys(obj).some(function(key) {
                                return obj[key] ? (obj[key]).toString().includes(query.search) : false;
                            })
                        })
                    })
                })
        })
    }
    options = {{
        selection: true,
        paging: false,
        search: true,
        sorting: true,
        rowStyle: {
            backgroundColor: '#FFF',
            fontSize: '14px'
        },
        headerStyle:{
            backgroundColor:'#EEE',
            fontWeight: 'bold'
        }
    }}
    actions = {[
        {
            icon: RefreshIcon,
            tooltip: 'Refresh Data',
            isFreeAction: true,
            onClick: () => this.ticketsTableRef.current && this.ticketsTableRef.current.onQueryChange(),
        }
    ]}
/>

where the columns are defined as following:

const columns = [
            {  
                title: 'Symbol',  
                field: 'symbol',
                customSort: (a, b) => a.symbol - b.symbol
            },{  
                title: 'Price',  
                field: 'price',
                type: 'numeric' 
            },{  
                title: '% Change',  
                field: 'change',
                type: 'numeric'
            },{  
                title: 'Volume',  
                field: 'volume',
                type: 'numeric'  
            },{  
                title: '52 Weeks High',  
                field: 'yearhigh',
                type: 'numeric'
            },{  
                title: '52 Weeks Low',  
                field: 'yearlow',
                type: 'numeric' 
            }
        ];

Note I am trying the custom sorting on the symbol column.

Problem:

The problem is that the columns sorting is not working. This seems a specific issue when fetching remote data. Any suggestions ?

[thiagotigaz]

I have the same issue, actually every time i click a column the query always appear with the same sorting as ascending, so i can't sort descending.

[fixiabis]

query object has property orderBy.field, orderDirection for sort data, try solve it by use sort method?

[thiagotigaz]

query object has property orderBy.field, orderDirection for sort data, try solve it by use sort method?

Yes, that's what I'm using to send to the backend, the problem is that it doesn't change so every time i click the column the same order(asc) comes. I could fix the bug doing the change suggested here https://github.com/mbrn/material-table/issues/2322

[fixiabis]

Just put data in state of parent component, and use isLoading, onSearchChange property to solve it?

[fixiabis]

const YourComponent = () => {
    const [tableProps, setTableProps] = useState({
        data: [],
        isLoading: true,
    })

    const [querySearch, setQuerySearch] = useState('')

    const loadData = () => {
        setTableProps({
            ...tableProps,
            isLoading: true,
        })

        let url = SERVER_URL + '/stockquotes/api/v1/watchlist'

        fetch(url)
            .then(response => response.json())
            .then(result => {
                setTableProps({
                    data: result.filter(function (obj) {
                        return Object.keys(obj).some(function (key) {
                            return obj[key] ? (obj[key]).toString().includes(querySearch) : false
                        })
                    }),
                    isLoading: false,
                })
            })
    }

    useEffect(loadData, [querySearch])

    return (
        <MaterialTable
            title='Stock data'
            icons={tableIcons}
            columns={columns}
            onSearchChange={setQuerySearch}
            options={{
                selection: true,
                paging: false,
                search: true,
                sorting: true,
                rowStyle: {
                    backgroundColor: '#FFF',
                    fontSize: '14px'
                },
                headerStyle: {
                    backgroundColor: '#EEE',
                    fontWeight: 'bold'
                }
            }}
            actions={[
                {
                    icon: RefreshIcon,
                    tooltip: 'Refresh Data',
                    isFreeAction: true,
                    onClick: loadData,
                }
            ]}
            {...tableProps}
        />
    )
}

[gxtaillon]

I'm on 1.68.x and am facing the same issue as well with remoteData. Enabling sort on the table and setting defaultSort on columns would only ever sort the first column in the set direction. Clicking on any header would not change the sort column or direction.

The workaround for this is to dynamically set the defaultSort only on the column that is expected to be sorted using the onOrderChange callback. It receives orderBy which corresponds to the index in your columns array or -1 for the first column, and orderDirection which will be either "asc" or "desc".

Pseudo code below (not tested)

const COLUMNS_DEFAULT_SORT_KEY = "defaultSort";
const [columns, setColumns] = useState([]);
// ...
<MaterialTable /*...*/ 
    columns={columns}
    onOrderChange={(orderBy, orderDirection) => {
        const key = orderBy < 1 ? 0 : orderBy;
        console.debug(`Changing order to ${key}:${orderDirection}`);
        setColums(columns.map((c, i) => {
            if (i !== key) {
                delete c[COLUMNS_DEFAULT_SORT_KEY];
            } else {
                c[COLUMNS_DEFAULT_SORT_KEY] = orderDirection;
            }
            return c;
        }));
    }} />

[gxtaillon]

Maybe related #2482