Table initial order not working


Topic: Table initial order not working

Mirak' asked 2 years ago

Expected behavior :


Data table to be sorted according to specified initial order column and direction.


Actual behavior :


The arrow is indicating that the column is sorted but it's not the case.


Resources (screenshots, code snippets etc.)

enter image description here

Code :


const columns = [ { label: 'Id', field: 'elementId' }, { label: 'Name', field: 'name', sort: 'asc' }, { label: 'Category', field: 'category' }, { label: 'Project', field: 'project' }, { label: 'Actions', field: 'actions', sort: 'disabled' }];const data = { columns: columns, rows: rows //my data};

enter image description here


Piotr Glejzer staff commented 2 years ago

can you put all data prop or all component code?


Mirak' commented 2 years ago

import React, { useState, useEffect, useRef } from 'react'; import { elementColumnNames } from "../TableColumns"; import { MDBDataTable } from 'mdbreact'; import { MDBIcon } from "mdbreact"; import { useAlert } from "react-alert"; import { Confirm } from "./Confirm"; import { ElementDetails } from "./ElementDetails"; import axios from "axios";

export const Material = () => {

const alert = useAlert();
const [elements, setElements] = useState([]);
const [error, setError] = useState(null);
const [refresh, setRefresh] = useState(0);

const detailsModal = useRef();
const confirmModal = useRef();
const editModal = useRef();

const getActions = (element) => {
    return (
        <div className="actions">
            <button className="btn btn-sm text-icon-button"
                onClick={() => detailsModal.current.details(element)}>
                <MDBIcon icon="search" size="lg" className="mr-2" />details
            </button>
            <button className="btn btn-sm" onClick={() => confirmModal.current.confirm(element)}>
                <MDBIcon far icon="trash-alt" size="lg" className="red-text" />
            </button>
            <button className="btn btn-sm" onClick={() => editModal.current.edit(element)}>
                <MDBIcon icon="pencil-alt" size="lg" className="green-text" />
            </button>
        </div>
    );
}

const columns = [
    {
        label: 'Id',
        field: 'elementId'
    },
    {
        label: 'Name',
        field: 'name',
        sort: 'asc'
    },
    {
        label: 'Category',
        field: 'category'
    },
    {
        label: 'Project',
        field: 'project'
    },
    {
        label: 'Actions',
        field: 'actions',
        sort: 'disabled'
    }
];

const rows = elements.map(element => ({
    elementId: element.elementId,
    name: element.name,
    category: element.categoryName,
    project: element.project.name,
    actions: getActions(element)
}));

const deleteElement = async (element) => {
    await axios.delete(/api/elements/${element.elementId})
    .then(() => {
        confirmModal.current.toggleConfirm();
        setRefresh(refresh + 1);
        alert.success("Element deleted successfully!");
    })
    .catch(error => {
        confirmModal.current.toggleConfirm();
        alert.error(error.message);
    });
}

const data = {
    columns: columns,
    rows: rows
};

useEffect(() => {
    async function getElements() {
        await axios.get('/api/elements')
        .then(response => {
            setElements(response.data);
        })
        .catch(error => {
            setError(error);
        });
    }
    getElements();
}, [refresh]);

if (error) {
    return <p className="danger-color">{error.message}</p>
}
else {
    return (
        <div>
            <h1>Revit Material</h1>
            <p>List of physical material used in each project.</p>
            <MDBDataTable striped bordered responsive btn
                order={['name', 'asc']}
                data={data}
            />
            <Confirm ref={confirmModal}
                title="Confirm Delete"
                message="Do you really want to delete this element?"
                action={deleteElement}
            />
            <ElementDetails ref={detailsModal}
                title="Element Details"
                fields={elementColumnNames}
            />
        </div>
    );
}

}


Piotr Glejzer staff commented 2 years ago

Hmm, I tested with another API, and It doesn't work as you said before. I added the task to fix it.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: PC
  • Browser: Google chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No