مرتب کردن ستون های جدول در ری اکت

درود خوبی...
پیوند زیر:
https://roocket.ir/discuss/11131

درست منظور رو نگرفتم ولی فکر کنم باید اون آرایه رو state تعریفش کنی و وقتی با نام مرتبش کرد اون رو با مرتب شده ست کنی اونوقت وقتی با سن خواست مرتب شه روی اون که با نام مرتب شده ست میشه
سورست رو بذار بهتر بشه فهمید

` const handleSortName = (e) => {  
const sortedData = \[...sortedArray\].sort((a, b) =>  
e.target.value === "ascending"  
? a.name.localeCompare(b.name, "fa")  
: b.name.localeCompare(a.name, "fa")  
);  
setSort(sortedData);  
};

const handleSortTitle = (e) => {  
const sortedData = \[...sortedArray\].sort((a, b) =>  
e.target.value === "asc"  
? a.title.localeCompare(b.title, "fa")  
: b.title.localeCompare(a.title, "fa")  
);  
setSort(sortedData);  
};

const handleSortAge = (e) => {  
const sortedData = \[...sortedArray\].sort((a, b) =>  
e.target.value === "asc" ? a.age - b.age : b.age - a.age  
);  
setSort(sortedData);  
};`

ممنون دوستان.این کدی هست که من برای مرتب کردن سن و عنوان و نام نوشتم اما درست کار نمیکند

چه اروری میگیرید؟ روی همون sort مپ میزنی دیگه؟

بله روی همون sort،مپ میزنم .ارور نمیگیرم ولی مثلا وقتی بر حسب نام مرتب کردم و دوباره بر حسب سن مرتب میکنم از اول جدول را مرتب میکند نه بر حسب جدول مرتب شده قبلی

آیا مطمئن هستید که type سن که برای sort میدید Number هست ؟ (اگر مشکل شما اینه که سن رو درست sort نمیکنه)

بله مطمینم که type سن number هست

ببینم این sortedArray آیا state هست و آیا setSort در واقع setter این sortedArray هست در این استیت ؟
نمایش جدولت در پایان بر اساس sortedArray هست دیگه درسته؟
خب در نهایت اینکه آیا تو نیاز داری مگه آپشن های سورت کاربر در استیت ذخیره بشه؟ خب در لحظه صرفا میخوای نتایج سورت رو ببینی دیگه .
چرا نمیای یک متغیر let در کامپوننت تعریف کنی بعد در هر روشی که کاربر سورت میکنه صرفا اون متغیر Let رو مقدارش رو برابر با نتیجه سورت شده قرار بدی و در نهایت از این متغیر برای رندر لیستت استفاده کن مقدار initial یا همون اولیه اش هم روی استیت آرایه لیست کاربرانت بزار.

بله.همین که شما گفتین دقیقا درسته

من دقیقا کدتون رو ندارم که ببینم چه کردی ای کاش استیت هات رو هم میدیدم که چطور تعریف شدن و کلا ساختار کامپوننت رو . اما من جواب قبلی خودم رو ویرایش کردم . یک راه حل بهت دادم تست کن

export default function Users() {
  const[sortedArray,setSort] = useState(data);

  const { page } = useParams();

  const navigate = useNavigate();

  const itemsPerPage = 10;

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  const handleSortName = (e) => {
    const sortedData = [...sortedArray].sort((a, b) =>
      e.target.value === "ascending"
        ? a.name.localeCompare(b.name, "fa")
        : b.name.localeCompare(a.name, "fa")
    );
    setSort(sortedData);
  };

  const handleSortTitle = (e) => {
    const sortedData = [...sortedArray].sort((a, b) =>
      e.target.value === "asc"
        ? a.title.localeCompare(b.title, "fa")
        : b.title.localeCompare(a.title, "fa")
    );
    setSort(sortedData);
  };

const handleSortAge = (e) => {
  const sortedData = [...sortedArray].sort((a, b) =>
    e.target.value === "asc" ? a.age - b.age : b.age - a.age
  );
  setSort(sortedData);
};

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = sortedArray.slice(indexOfFirstItem, indexOfLastItem);

  return (
    <div
      className="flex justify-between  w-full"
      style={{ width: "100%", height: "100%" }}
    >
      <div className="flex w-5/6 flex-col   items-end">
        <h1 className="font-bold p-4 text-xl">کاربران</h1>
        <div className="flex  justify-between  w-full p-4 items-center">
          <div className="flex">
            <button className="bg-yellow-500 text-white p-2 rounded-md  cursor-pointer">
              بازگشت به حالت اولیه
            </button>
            <button className="bg-blue-400 text-white p-2 rounded-md ml-4 cursor-pointer">
              افزودن کاربر
            </button>
          </div>
          <p>لیست تمام کارکنان</p>
        </div>
        <p className="p-2">فیلتر</p>
        <div className="flex  ">
          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس وضعیت</label>
            <select className="border text-right">
              <option>انتخاب گزینه ها</option>
              <option>فعال به غیر فعال</option>
              <option> غیرفعال به فعال</option>
            </select>
          </div>

          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس عنوان</label>
            <select className="border text-right" onChange={handleSortTitle}>
              <option>انتخاب گزینه ها</option>
              <option value='asc'> (حروف الف - ی) نام ها</option>
              <option value='desc'>(حروف ی - الف) نام ها</option>
            </select>
          </div>

          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس نام</label>
            <select className="border text-right" onChange={handleSortName}>
              <option>انتخاب گزینه ها</option>
              <option value="ascending"> (حروف الف - ی) نام ها</option>
              <option value="descending">(حروف ی - الف) نام ها</option>
            </select>
          </div>
        </div>
        <div className="mt-4 flex">
          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس جنسیت</label>
            <select className="border text-right" >
              <option>انتخاب گزینه ها</option>
              <option value="female">زن به مرد</option>
              <option value="male">مرد به زن</option>
            </select>
          </div>
          <div className="flex flex-col mr-4">
            <label> مرتب کردن بر اساس سن</label>
            <select className="border text-right" onChange={handleSortAge}>
              <option >انتخاب گزینه ها</option>
              <option value="asc">صعودی</option>
              <option value="desc">نزولی</option>
            </select>
          </div>
        </div>

        <div className="flex flex-col mr-4 mt-2">
          <label className="text-right mb-2">جستجو</label>
          <input type="text" className="border w-full" />
        </div>

        <div>
          <p className="text-right mr-2">عملیات</p>
          <div className="flex flex-end">
            <div className="flex flex-col">
              <label className=" mr-1 mb-2 mt-2 text-right">
                عملیات بر روی کاربران
              </label>
              <div className="flex">
                <button className="mr-2 bg-yellow-500 text-white rounded-md p-2">
                  انجام عملیات
                </button>
                <select className="mr-2">
                  <option>انتخاب گزینه ها</option>
                  <option>اضافه کردن کاربر</option>
                  <option>حذف کردن کاربر</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div className="flex flex-col w-full">
          <div>
            <table className="border-collapse w-full mb-4">
              <thead className="mr-8">
                <tr>
                  <th>عملیات</th>
                  <th>وضعیت</th>
                  <th>سن</th>
                  <th>جنسیت</th>
                  <th>ایمیل</th>
                  <th>عنوان</th>
                  <th>نام</th>
                  <th>انتخاب</th>
                </tr>
              </thead>
              <tbody>
                {currentItems.map((item, index) => (
                  <tr key={index} className="border-b mr-1">
                    <td>
                      <button className="bg-red-500 text-white p-2 rounded-sm cursor-pointer">
                        حذف
                      </button>
                      <button className="bg-blue-500 text-white p-2 rounded-sm cursor-pointer ml-2">
                        ویرایش
                      </button>
                    </td>
                    <td>{item.status}</td>
                    <td>{item.age}</td>
                    <td>{item.gender}</td>
                    <td>{item.email}</td>
                    <td>{item.title}</td>
                    <td>{item.name}</td>
                    <td className="mr-1">
                      <input type="checkbox" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="flex items-center">
            <div className="flex space-x-2 mr-8">
              <button
                onClick={() => navigate(`/users/${currentPage + 1}`)}
                className={`border p-2 hover:bg-blue-500 hover:text-white ${
                  currentPage === 11 ? "bg-white text-gray-400" : ""
                }`}
                disabled={currentPage === 11}
              >
                بعدی
              </button>
              <button
                onClick={() => navigate(`/users/11`)}
                className="border p-2 hover:bg-blue-500 hover:text-white"
              >
                11
              </button>
              <button
                onClick={() => navigate(`/users/10`)}
                className="border p-2 hover:bg-blue-500 hover:text-white "
              >
                10
              </button>
              <button
                onClick={() => navigate(`/users/9`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                9
              </button>
              <button
                onClick={() => navigate(`/users/8`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                8
              </button>
              <button
                onClick={() => navigate(`/users/7`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                7
              </button>
              <button
                onClick={() => navigate(`/users/6`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                6
              </button>
              <button
                onClick={() => navigate(`/users/5`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                5
              </button>
              <button
                onClick={() => navigate(`/users/4`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                4
              </button>
              <button
                onClick={() => navigate(`/users/3`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                3
              </button>
              <button
                onClick={() => navigate(`/users/2`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                2
              </button>
              <button
                onClick={() => navigate(`/users`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                1
              </button>
              <button
                onClick={() => navigate(`/users/${currentPage - 1}`)}
                className={`border p-2 hover:bg-blue-500 hover:text-white ${
                  currentPage === 1 ? "bg-white text-gray-400" : ""
                }`}
                disabled={currentPage === 1}
              >
                قبلی
              </button>
            </div>
            <p>نمایش {startIndex+1} تا {endIndex} از 110 نتیجه موجود</p>
          </div>
        </div>
      </div>

      <div className=" w-64 bg-blue-950 text-white flex flex-col cursor-pointer">
        <h1 className=" p-2 text-right">مدیریت کارکنان</h1>

        <Link
          to="/dashboard"
          className="flex justify-end  items-center p-2  hover:bg-blue-800 "
        >
          <p className="mr-2">داشبورد</p>
          <MdDashboard />
        </Link>
        <Link
          to="/users"
          className="flex justify-end items-center p-2 hover:bg-blue-800"
        >
          <p className="mr-2">کاربران</p>
          <FaUsersRectangle />
        </Link>
      </div>
    </div>
  );
}

ممنون از پاسختون.این ساختار کلی component هست

به نظرت ممکن نیست بخاطر این باشه استیت ها async هستن ؟ میای یه تست بگیری ببینی بصورت callback عمل کنی درست میشه یا نه لطفا ؟

setSort(prevSortedArray => sortedData);

این کار رو که بالا نوشتم تو همه سورت ها انجام بده به جای این بخش setSort(sortedData);

یعنی دقیقا همین کدی که شما نوشتید رو جایگزین کنم؟ اگر همین هست که جایگزین کردم نشد.بازم ممنون.چند روزه جواب این سوالم رو پیدا نمیکنم

همون لحظه که سورت میکنی با react developer tools چک کن ببین در لحظه استیت sortedArray داره سورت میشه و تغییر میکنه ترتیبش تو developer tools

این کار هم یه تست بکن :

let   theSorted= sortedArray   // اینجا

const handleSortAge = (e) => {
  const sortedData = [...sortedArray].sort((a, b) =>
    e.target.value === "asc" ? a.age - b.age : b.age - a.age
  );
theSorted=sortedData  // اینجا
};

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = theSorted.slice(indexOfFirstItem, indexOfLastItem);// اینجا

اینم یه تستی بکن به همون روش let که گفتم . ایده رو از این تیکه که نوشتم بگیر به تست بکن . برای همه سورت هات اینکار رو بکن نه فقط age

نه sortedArray سورت نمیشه. این کدی که شما نوشتید هم نوشتم نشد. فکر میکنم به خاطر همون async بودن استیت ها هست که شما اشاره کردید و باید از UseEffect استفاده کنم اما نمیدونم به چه صورت؟