react-flexible-table

A highly customizable and flexible table component for React
## Support buymeacoffee [buymeacoffee](https://buymeacoffee.com/kahramantue) ## Demo and documentation You can access all code examples and documentation on site https://mertkahramanturk.github.io/react-flexible-table/?path=/story/components-flexibletable--basic ## Issue Prioritizing Please share your problems, bugs and development requests. [Issue](https://github.com/mertkahramanturk/react-flexible-table/issues) ## Installation #### 1.Install package To install react-flexible-table with `npm`: npm install react-flexible-table ## Types / General Table Props
Prop NameTypeDefaultDescription
columnsarray[]Table column definitions. Each item contains key, title,searchable,openTableDetail, sortable cellStyle
dataarray[]The dataset that populates the table.
actionsarray[]Optional row-level action buttons (e.g., edit, delete).
paginationbooleanfalseEnables or disables pagination controls.
pagenumber1Current page number (used with external pagination).
pageSizenumber10Number of rows per page.
totalItemsnumber0Total number of items (used for external pagination).
totalPagesnumber1Total number of pages (used for external pagination).
externalSortbooleanfalseIf true, disables internal sorting and expects setFilter to handle it.
externalSearchbooleanfalseIf true, disables internal searching and delegates it to setFilter.
searchPlaceholderstring"Search..."Placeholder for search inputs.
setFilter(filter: object) => void() => {}Callback to update filtering externally (used with external search/sort).
changePage(page: number) => void() => {}Callback to update the page externally.
changePageSize(size: number) => void() => {}Callback to change page size externally.
onRowClick(row: object) => voidundefinedTriggered when a row is clicked. Provides information about the clicked row
tableDetail(row: object) => ReactNodenullRenders expandable detail row content.
handleMultiSelect(rows: object[]) => voidnullCallback for checkbox row selection.
fivotColumnnumber0Number of columns to pin (freeze) to the left. To use, wrap the table in a div and do apply max-width
fivotLeftnumber100Width of pinned (frozen) columns in pixels.
stickyHeaderbooleanfalseKeeps the header sticky on scroll.
lineStripedbooleanfalseAlternates row background colors.
loadingbooleanfalseDisplays loading state.
loadingComponentReactNodenullCustom loading spinner/component.
previousDataarray[]Optional data to show while new data is loading.
#### Columns You can give an array directly when creating the columns of the table. The key value must match the field name of the data. ```jsx table_columns = [ { "title": "Id", "key": "id", "sortable": true, "searchable": true, "openTableDetail": true, "cellStyle": { "minWidth": "100px", "maxWidth:": "100px" } }, ] ``` If you want to show a column in a different style, you can do so as follows. ```jsx const columns = table_columns?.map((col) => { if (col.key === 'status') { return { key: col.key, title: col.title, sortable: col.sortable, searchable: col.searchable, cellStyle: col.cellStyle, openTableDetail: col.openTableDetail, render: (row) => (
{row.status}
), }; } return { key: col.key, title: col.title, cellStyle: col.cellStyle, sortable: col.sortable, searchable: col.searchable, openTableDetail: col.openTableDetail }; }); ``` #### Data You can send the data structure as an array. Your column keys and field names will match and be displayed in the table. ```jsx [ { "id": 1, "name": "John Smith", "email": "john.smith@example.com", "address": "123 Main St", "city": "New York", "state": "NY", "zip": "10001", "phone": "(212) 555-1234", "status": "Pending" }, ... ] ``` #### Actions Optional row-level action buttons (e.g., edit, delete, info).
Prop NameType
iconReactNode
ClassNameString
onClickfunction
styleString
```jsx const actions = [ { icon: InfoIcon, className: 'font-size-14 text-dark', onClick: (rowData) => handleActionClick(rowData?.id), style: { backgroundColor: 'transparent', border: 'none', cursor: 'pointer' } } ]; ``` #### tableDetail openTableDetail indicates the component that will be opened when the column component marked as true is clicked. Each row opens on its own and closes on the second click. You can access the row information directly from here. ```jsx const renderTableDetail = (data) => (
Address:
{data.address}
City:
{data.city}
State:
{data.state}
Zipcode:
{data.zip}
) ``` #### fivotColumn & fivotLeft > :warning: There should be a container structure on the page, such as maxWidth etc. As the number of data in the table grows, it does not fit on the screen and users examine the data with the scrolling process. The information that seems important here can be fixed with fivotColumn, this column always remains fixed during the scrolling process. ```jsx return (
) ``` ## Usage Here is a basic example of using react-flexible-table within a react application. ```jsx import { useCallback } from "react"; import "./App.css"; import { FlexibleTable } from "react-flexible-table"; import "../node_modules/react-flexible-table/dist/index.css"; or import "react-flexible-table/dist/index.css"; import data from "./test-data.json"; import InfoIcon from "./info-circle.svg"; const table_columns = [ { title: "Id", key: "id", sortable: true, openTableDetail: true, cellStyle: { minWidth: "100px", "maxWidth:": "100px" }, }, { title: "İsim", key: "name", searchable: true, sortable: true, cellStyle: { minWidth: "200px", "maxWidth:": "200px" }, }, { title: "Email", key: "email", sortable: true, cellStyle: { minWidth: "200px", "maxWidth:": "200px" }, }, { title: "Phone", key: "phone", sortable: false, cellStyle: { minWidth: "200px", "maxWidth:": "200px" }, }, { title: "Status", key: "status", sortable: false, cellStyle: { minWidth: "200px", "maxWidth:": "200px" }, }, ]; function App() { const handleFilter = useCallback(() => { console.log("handleFilter"); }, []); const handleRowClick = () => { console.log("handleRowClick"); }; const handleMultiSelect = (data) => { console.log("handleMultiSelect: ", data); }; const handleActionClick = () => { console.log("handleActionClick"); }; const changePage = () => { console.log("changePage"); }; const changePageSize = () => { console.log("changePageSize"); }; const page = 1; const pageSize = 20; const totalItems = 28; const totalPages = 1; const loading = false; const renderTableDetail = (data) => (
Address:
{data.address}
City:
{data.city}
State:
{data.state}
Zipcode:
{data.zip}
); const actions = [ { icon: InfoIcon, className: "font-size-14 text-dark", onClick: (rowData) => handleActionClick(rowData?.id), style: { backgroundColor: "transparent", border: "none", cursor: "pointer", }, }, ]; const columns = table_columns?.map((col) => { if (col.key === "status") { return { key: col.key, title: col.title, sortable: col.sortable, searchable: col.searchable, cellStyle: col.cellStyle, openTableDetail: col.openTableDetail, render: (row) => (
{row.status}{" "}
), }; } return { key: col.key, title: col.title, cellStyle: col.cellStyle, sortable: col.sortable, searchable: col.searchable, openTableDetail: col.openTableDetail, }; }); return ( <> ); } export default App; ReactDOM.render(, document.getElementById("react-div")); ``` ## Contributors ### Code Contributors ## License This project is licensed under the terms of the [MIT license](/LICENSE).