چگونه می توانیم اعمالی مانند مرتب سازی و فیلتر روی یک جدول در react انجام دهیم؟
- فرشته حقیقی 4 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
چند نمونه از عملیاتهایی که که میتوان روی یک جدول در 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}/>
}
- فرشته حقیقی 4 سال قبل پاسخ داد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید