beautiful-react-table is a customizable table component for React applications. It provides a flexible and feature-rich table implementation with various configuration options.
To install beautiful-react-table, use the following command:
npm install beautiful-react-table npm install react-beautiful-dnd npm install @mui/material
Import the necessary components and interfaces from the "beautiful-react-table" package:
import { useState } from "react";
import {
IColumnConfig,
IColumnHeader,
IColumnConfigStructure,
IColumnHeaderStructure,
// ... other imports ...
} from "beautiful-react-table";
function App() {
const [data, setData] = useState<any[]>([
{
id: 1,
agentId: 1,
agentCreationDate: "2023-03-22T00:00:00",
agentName:"Markos",
},
{
id: 2,
agentId: 2,
agentCreationDate: "2023-03-22T00:00:00",
agentName: "Daniel",
},
{
id: 3,
agentId: 3,
agentCreationDate: "2023-03-22T00:00:00",
agentName: "Mary",
},
]);
const [columnHeader] = useState<IColumnHeader[]>([
{
id: 1,
order: 1,
title: "Id",
},
{
id: 2,
order: 2,
title: "Name",
},
{
id: 3,
order: 3,
title: "Creation Date",
},
]);
const [columnConfig] = useState<IColumnConfig<any>[]>([
{
id: 1,
title: (row: any, name: string) => (
<div>
<p>{row.title}</p>
</div>
),
setRow: (row: any) => (
<div>
<div>{row.id}</div>
</div>
),
isVisible: true,
},
{
id: 2,
title: (row: IColumnHeader, name: string) => (
<div>
<p>{row.title}</p>
</div>
),
setRow: (row: any) => (
<div>
<div>{row.agentName}</div>
</div>
),
isVisible: true,
},
{
id: 3,
title: (row: IColumnHeader, name: string) => (
<div>
<p >{row.title}</p>
</div>
),
setRow: (row: any) => (
<div>
<div>{row.agentCreationDate}</div>
</div>
),
isVisible: true,
},
]);
const [columnsConfigStructure, setColumnsConfigStructures] = useState<
IColumnConfigStructure<any>
>({
[StructureConfig.Main]: {
name: "Columns",
items: columnConfig,
},
[StructureConfig.Freezed]: {
name: "Freezed",
items: [],
},
});
const [columnsHeaderStructure, setColumnHeaderStructures] =
useState<IColumnHeaderStructure>({
[StructureConfig.Main]: {
name: "Columns",
items: columnHeader,
},
[StructureConfig.Freezed]: {
name: "Freezed",
items: [],
},
});
return (
<div style={{ width: "80%", margin: "0 auto" }}>
<Table
data={data} // TableData
columnsConfigStructure={columnsConfigStructure} // Structure to store in the database - pin/hide/drag-drop
columnsHeaderStructure={columnsHeaderStructure} // headerStructure will automatically work with configStructure
// ... other props ...
/>
</div>
);
}
export default App;We can drag, hide and dock columns vertically and horizontally. Add the "draggableColumns" details, then create the "setColumnsConfigStructure" and "setColumnHeaderStructure" functions.
const setColumnsConfigStructure = (option: IColumnConfigStructure<any>) => {
setColumnsConfigStructures(option);
};
const setColumnHeaderStructure = (option: IColumnHeaderStructure) => {
setColumnHeaderStructures(option);
};
And if we want to add some functionality to the save button, we need to use the "storeStructure" function.
const storeStructure = () => {};Let's add width to the column
columnMinWidth={120}
When we use isHoveredRow props, we need to make actions. We have default icons, but we can make custom.
const [rowActions] = useState<IrowActions[]>([
{
action: (e, item, index) => {
e.stopPropagation();
},
},
{
action: (e, item, index) => {
e.stopPropagation();
},
},
]);const [pageSize] = useState<IPageSizes[]>([
{ id: 1, count: 10 },
{ id: 2, count: 25 },
{ id: 3, count: 50 },
{ id: 4, count: 100 },
]);When we use
freezedRightSide={"dropdown"}, we have to make config for list.
const [links] = useState<ILinksList[]>([
{
id: 1,
name: "Overpayments",
action: (option: any) => {},
},
{
id: 2,
name: "Estate Owners",
action: (option: any) => {},
},
]);We can create costume freezed columns in right side.
const [rightFreezeConfig] = useState<IColumnConfig<any>[]>([
{
id: 1,
title: (row: IColumnHeader, name: string) => (
<div>
<p>{row.title}</p>
</div>
),
setRow: () => (
<div>
<p>View Details</p>
</div>
),
isVisible: true,
},
{
id: 2,
title: (row: IColumnHeader, name: string) => (
<div>
<p>{row.title}</p>
</div>
),
setRow: () => (
<div>
<p>View Details</p>
</div>
),
isVisible: true,
},
]);List for filtering aggregates Works with PandaTech.IEnumerableFilters nuget
const [listForDropdown] = useState<ITotalList[]>([
{
id: 1,
title: "AVG",
},
{
id: 2,
title: "MIN",
},
{
id: 3,
title: "MAX",
},
{
id: 4,
title: "SUM",
},
]);Filters works with PandaTech.IEnumerableFilters nuget
const [selectedColumnName, setSelectedColumnName] = useState<string>("");
const [pagePerFilterField, setPagePerFilterField] = useState<number>(1);
const [perColumnTotalCount, setPerColumnTotalCount] = useState<number>(0);
const [filterDataForRequest, setFilterDataForRequest] = useState<ItemFields[]>([]);
const [totalPagesCount, setTotalPagesCount] = useState<number>(0);
const [isLoadingFilters, setIsLoading] = useState<boolean>(false);
const [perColumnListForFilters, setPerColumnListForFilters] = useState<string[]>();const setColumnsConfigStructure = (option: IColumnConfigStructure<any>) => {
setColumnsConfigStructures(option);
};
const setColumnHeaderStructure = (option: IColumnHeaderStructure) => {
setColumnHeaderStructures(option);
};
const handleEdit = (option: any) => {};
const handleDelete = (option: any[] | string) => {};
const RightSideSelfAction = (option: number | string) => {};
const storeStructure = () => {};
const getRow = (row: any) => {};
const getPageRowsCountAndCurrentPage = (pageNumber: number, rowsCount: IPageSizes) => {};
const handleChangePagePerFilterField = () => {};
const getFilteredDataForTable = (option?: ItemFields[]) => {};
const getDownloadType = (option: string, checkedRows: any[] | string) => {};
const customHeaderAction = (option: any[] | string) => ReactNode;The "Table" component accepts the following props:
data (required): An array of objects representing the table data.
columnsConfigStructure (required): An object representing the column configuration structure.
columnsHeaderStructure (required): An object representing the column header structure.
allDataFromDb (optional): An array of objects representing the complete data set from the database.
columnsTotalStructure (optional): An object representing the column total structure.
pageSize (optional): An array of page sizes for pagination.
links (optional): An array of link items for navigation.
listForDropdown (optional): An array for choosing footer items type.
rowActions (optional): An array of row actions for each table row.
selectedPage (optional): An object representing the currently selected page.
currentPage (optional): The current page number.
totalCount (optional): The total number of items in the table.
multipleCheck (optional): Boolean flag to enable multiple row selection.
isStickyFirstColumn (optional): Boolean flag to enable sticking the first column.
isHoveredRow (optional): Boolean flag to enable highlighting the hovered row.
draggableColumns (optional): Boolean flag to enable column reordering.
freezedRightSideVisible (optional): is dropdown.
FreezeIcon (optional): The icon to display for freezing columns.
headerColor (optional): The color of the table header.
footerColor (optional): The color of the table footer.
freezedLeftSideColor (optional): The color of the left side of the table when frozen.
freezedRightSideColor (optional): The color of the right side of the table when frozen.
freezedRightSide (optional): The right side content of the frozen table.
columnMinWidth (optional): The minimum width of each column.
headerHeight (optional): The height of the table header.
footerHeight (optional): The height of the table footer.
leftFreezedColumnWidth (optional): The width of the left side column when frozen.
rightFreezedColumnWidth (optional): The width of the right side column when frozen.
leftSideIcon (optional): The icon to display for the left side of the table.
RightSideSelfAction (optional): A function to handle the self-action on the right side of the table.
setColumnTotalStructures (optional): A function to set the column total structures.
handleEdit (optional): A function to handle the edit action for a table row.
handleDelete (optional): A function to handle the delete action for multiple table rows.
setColumnsConfigStructure (optional): A function to set the column configuration structure.
setColumnHeaderStructure (optional): A function to set the column header structure.
handleSelectDataSize (optional): A function to handle the selection of data size for pagination.