EN

Search
Close this search box.

موستانگ، وحشیِ دوست داشتنی

پاسخ داده شد
0
0

چگونه می توانیم اعمالی مانند مرتب سازی و فیلتر روی یک جدول در react انجام دهیم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

چند نمونه از عملیاتهایی که که میتوان روی یک جدول در react  انجام داد بصورت زیر می باشد:

نمایش دیتاهای جدول

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} />
}

export default App;

مرتب سازی

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} sortable />
}

export default App;

اگر بخواهیم ستونهایی از جدول مرتب نشوند

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} sortable nonSortCols={["name","lastname"]} />
}

export default App;

در اینجا مرتب سازی روی ستونهای name و lastname انجام نمی شود.

اگر بخواiهیم روی ستونها فیلتر قرار دهیم

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} filterable/>
}

export default App;

اگر بخواهیم بعضی ستونها فیلتر نشوند

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} filterable nonFilterCols={["gender","email"]]/>
}
export default App;

اگر  بخواهیم ستونهای جدید به جدول خود اضافه کنیم

import ReactFlexyTable from "react-flexy-table"
import deleteIcon from "./icons/delete-button-svgrepo-com.svg"
import editIcon from "./icons/edit-svgrepo-com.svg"

const App = ()=>{
 const additionalCols = [{
    header: "Actions",
    td: (data) => {
      return <div>
        <img src={deleteIcon} width="30" height="20" onClick={() => alert("حذف ردیف شماره " + data.id)} /> // delete icon
        <img src={editIcon} width="30" height="20" onClick={() => alert("ویرایش ردیف شماره" + data.id)} /> // edit icon
      </div>
    }
  }]
  return <ReactFlexyTable data={data} additionalCols={additionalCols}/>
  }
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت