React Datatable (Tailwind)

npm i @mertefecerit/react-datatable

import {XDatatable, useXDatatable} from "@mertefecerit/react-datatable";
import "@mertefecerit/react-datatable/dist/style.css";
// useXDatatable for datatable context

const config = {
    options: {
        // optional
        // I haven't made it give the value true yet without specifying these.
        pagination: true,
        search: true,
        limit: 10,
        info: true,
        newRecord: true,
    },
    columns: [
        // In this section, the names of the columns and their property values are given. 
        // It can also be given whether they are sortable or not. 
        // It can also be sent in as a component. 
        // Component takes row and column values.
        // You also need to set sortable false for accesses such as component or "example.example". I haven't developed this part yet.
        {header: "Product Name", accessor: 'name', component: <ExampleComponent />},
        {header: "Product Type", accessor: 'product_type.name', sortable: false},
        {header: "Created Date", accessor: 'created_at'},
        {header: "Updated Date", accessor: 'updated_at'},
    ],
    newRecordButton: () => {
        // optional
        // The new registration button triggers this area.
    },
    loader: (queryString) => {
        // This is triggered whenever the state in the table changes. A serialized version of the table state values is given inside.
    },
    contextMenu: {
        // optional
        // Menu content opened with right click.
        items: [
            {
                label: 'Edit',
                action: (payload) => {
                    // click menu item action, payload is row data
                }
            },
            {
                component: <Example />
                // If you want, you can also send components from outside. Component takes "label" as prop
                label: 'Delete',
                action: (payload) => {
                    
                }
            },
        ]
    }
}

//products
const products = {
    data: [
        {
            "id": 1,
            "name": "Product 1",
            "deleted_at": null,
            "created_at": "24-06-2024 11:37:40",
            "updated_at": "27-06-2024 13:53:56",
            "product_type_id": 1,
            "product_type": {
                "id": 1,
                "name": "Device",
                "deleted_at": null,
                "created_at": "2024-06-13T19:10:39.000000Z",
                "updated_at": "2024-06-13T19:10:39.000000Z"
            }
        }
    ],
    meta: {
        current_page: 1,
        last_page: 2,
        from: 1,
        to: 10,
        total: 16,
    }
}
// isLoading prop is boolean trigger table loading component

// usage
<XDatatable
    config={config}
    data={products}
    isLoading={loading}
>
    <!--This section getting children access useXDatatable context -->
</XDatatable>

Still in development stage!