ashvin27 / react-datatable Goto Github PK

I use extraButtons props and got

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `TableHeader`. It was passed a child from

if i search some keyword and i got the result the searched, and now i am trying to print or export the data. It should only print or export the searched data not the whole data. please give me the suggestion i want to implement like the way.

Thank you :)

It seems like some styles are corrupted while bootstrap is enabled i dont think it is good
Also i see use of old Font Avesome 4.x (because of icons on extra buttons)

Some actions?

when I navigated to another table and this error appear on the console

this is my table

I want to remove this column. What should I do?

Hello, The package is awesome though if using bootstrap js and css does not display properly. For more contact back.

When I tried to download xls file by clicking export button its gives the error.

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
    at invariant (tiny-invariant.esm.js:13)
    at Object.children (react-router-dom.js:147)
    at ReactDOMServerRenderer.render (react-dom-server.browser.development.js:3749)
    at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:3453)
    at Object.renderToStaticMarkup (react-dom-server.browser.development.js:4086)
    at ReactDatatable.getExportHtml (index.js:377)
    at ReactDatatable.exportToExcel (index.js:414)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:481)
    at executeDispatch (react-dom.development.js:614)
    at executeDispatchesInOrder (react-dom.development.js:639)
    at executeDispatchesAndRelease (react-dom.development.js:744)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:753)
    at forEachAccumulated (react-dom.development.js:725)
    at runEventsInBatch (react-dom.development.js:770)
    at runExtractedPluginEventsInBatch (react-dom.development.js:916)
    at handleTopLevel (react-dom.development.js:6171)
    at batchedEventUpdates (react-dom.development.js:2422)
    at dispatchEventForPluginEventSystem (react-dom.development.js:6271)
    at dispatchEvent (react-dom.development.js:6301)
    at unstable_runWithPriority (scheduler.development.js:674)
    at runWithPriority$2 (react-dom.development.js:11834)
    at discreteUpdates$1 (react-dom.development.js:22935)
    at discreteUpdates (react-dom.development.js:2440)
    at dispatchDiscreteEvent (react-dom.development.js:6254)

  constructor(props) {
        super(props);

        this.columns = [
            {
                key: "course_name",
                text: "Course  Name", 
                sortable: true,
                width: 180,
                cell: (record, index) => {
                    return (
                        <Link to={{
                            pathname: `/updatecourseadmin`,
                            state: { 
                                course_id:  record.course_id,
                                course_auto_id:  record.id
                             
                            }
                        }} className="enquiryLink">{ record.course_name }</Link>
                    );
                }
            },
            {
                key: "institute_name",
                text: "Institute", 
                sortable: true,
                width: 150
            },
            {
                key: "course_category",
                text: "Category", 
                sortable: true,
                width: 150
            },
            {
                key: "approve",
                text: "Approve", 
                sortable: false,
                width: 130,
                cell: (record, index) => {
                    return (
                        <UnapproveChildApprove feature={record.id}  approved={record.approved}/>
                    );
                }
            }, 
            {
                key: "preview",
                text: "Preview", 
                sortable: false,
                width: 100,
                cell: (record, index) => {
                    return (  
                        <img src={api_server.base_url+"/"+record.image} style={{height:"50px","width":"80px"}} />
                    );
                }
            }
        ];
        this.config = {
            page_size: 10,
            length_menu: [10, 20, 50],
            show_filter: true,
            show_pagination: true,
            pagination: 'advance',
            filename: "approved_courses",
            button: {
                excel: true,
                print: true,
                csv: true
            }
        } 

Please help

When exporting to excel the actual download works, however the file is not openable.

When there is an empty record, the pagination still enables next and last buttons. This shouldn't be so. All pagination buttons should be disabled for empty records.

how to Rounded Corner Style of table ?

Charles

When I am trying to render nested data, How should I need to provide "KEY" name ?

Example : If I have below data, How can I print name in single column ?

let data = [
{
id: 1,
userDetails : {
name : "vinod",
age : 23
}
}

{
id: 1,
userDetails : {
name : "kumar",
age : 22
}
}

]

Is recommended don't apply the styles on the core.

./node_modules/@ashvin27/react-datatable/lib/assets/css/style.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@ashvin27/react-datatable/lib/index.js

Hi,

Thanks for very very easy use datatable component. Great job.

Is it possible override html nodes for multilanguage or change icons?

And I guess there is a problem excel export. Exported excel file is 2kb around and can't be opened.

Hi can't read some nested data from my json file. please help

Is this project dead and if so, where is an updated datagrid for React? I started learning react and started using this last month, and running into some issues.

• images not appearing on the export buttons
• how to add a checkbox and or radio button in a cell
• cell formatting based on data

If there is an updated version of this datagrid or if it's ghost now, can someone point me to a newer datagrid to use within React?

Hey Ashvin27, am trying to read a nested json data, but can't seem to. please i do require your assistance.. Please do share any thoughts on this

Hey for the custom cell data I need custom onSort function to be manipulated
for table like this

I find out that if we have 0 in one of column results then that 0 is not renders

Is that ok? or needs a fix?

Hello,
Some functions gives an warning because of React's Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:void(0);

Thanks for great job.

I want to use filters in the column, however, while the documentation mentions filters, it doesn't show how to actually use it...

i can't the csv export functionality isn't working well is there a way to fix it

`./node_modules/@ashvin27/react-datatable/lib/style.css 1:12
Module parse failed: Unexpected token (1:12)
You may need an appropriate loader to handle this file type.

th.sortable {
| color: #2196F3;
| cursor: pointer;`

If a user inputs text on the search field, the matched text result will be highlighted. Is it achievable?

show_filter and show_last not working on false

10 months and no new update, this project still alive?

How can i access firstname [data from nested json objects]???

ReferenceError: _ is not defined
    at TableHeader (TableHeader.js:38)
    at renderWithHooks (react-dom.development.js:16260)

I got this when trying to render a table, looks like the proper lodash package wasn't included in TableHeader.js

when we need to deal any big data, we call api for paginate.
like apicall?start_at=20&limitation=10

To use this plugin, I should load the whole data and load them at a once.
it make me to feel the website so slow.
Is there any way to call api for paginate?

how to generate values from table to pdf?

I applied to sort the table column width is fluctuate.

Hi i am trying to export my table in CSV but whenever i try to export it only show the data not in cell tag so i wanna know is there is any way of doing it please help me
Thank You.

            {
                // key: "id",
                text: "S.No.",
                className: "id",
                align: "left",
                sortable: true,
                cell:(row, index)=>index+1
            },
            {
                key: "tx_id",
                text: "Transaction_id",
                className: "transaction_id",
                align: "left",
                sortable: true,
            },
            {
                key: "email",
                text: "Email",
                className: "email",
                align: "left",
                sortable: true,
            },
            

            {
                key: "amount",
                text: "Amount",
                className: "amount",
                align: "left",
                sortable: true,
                cell: record => {
                    return (
                        <span>
                            {Math.abs(record.coin_amount)}
                        </span>
                    );
                }
            },
            {
                key: "coinName",
                text: "	Cryptocoin",
                className: "coinName",
                align: "left",
                sortable: true,
                cell: record => {
                    return (
                        <span>
                        {record.coinName == undefined ?
                            (this.state.cryptoName):(record.coinName)
                        }
                        </span>
                    );
                }
            },
            // {
            //     key: "status",
            //     text: "Status",
            //     className: "status",
            //     align: "left",
            //     sortable: true
            // },
            {
                key: "created",
                text: "Date",
                className: "date",
                align: "left",
                sortable: true,
                cell: record => {
                    return (
                        <Fragment>
                            {Moment(record.created).format('lll')}
                        </Fragment>
                    );
                }
            },
]````

Enable or disable state saving. When enabled data tables will store state information such as pagination position, display length, filtering and sorting. When the end-user reloads the page the table's state will be altered to match what they had previously set up.

as we use in datatables like

$('#example').dataTable( {
stateSave: true
} );

https://datatables.net/reference/option/stateSave

For me filter option working for only one column.may i know what is the isssue?

Add checkbox in header and row also. how can we perform the select all functions

the number of columns is too big, but there is no x-scale scrollbar, how do i add it? Thanks

Hi,
The library is nice. Easy to integrate. But could not find the server-side example of the implementation.
Please add it in the documentation.

Can i config the CSS for pagination ? like active class etc.
And how if i want to show not only active page ?

Maybe like some config at this component
https://www.npmjs.com/package/react-js-pagination

Thanks.

Check the render method of ReactDatatable. See https://fb.me/react-warning-keys for more information.

in tr (created by ReactDatatable)
in ReactDatatable (at Users.js:140)
in div (at Users.js:137)
in div (at Users.js:136)
in div (at Users.js:134)
in div (at Users.js:132)
in Users (created by ConnectFunction)
in ConnectFunction (at PrivateRoute.js:11)
in Route (at PrivateRoute.js:7)
in PrivateRoute (created by ConnectFunction)
in ConnectFunction (at App.js:46)
in Switch (at App.js:44)
in Switch (at App.js:40)
in div (at App.js:39)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:38)
in Provider (at App.js:37)
in App (at src/index.js:7)

Because of this error search, pagination, sorting not working Kindly help me out

How we can set default page=2 and
value in search field like 'Xyz string'

Hi Ashvin, great work here

Issue
CSV does not contain computed data

cell: record => ${record.lastName} ${record.firstName}

other values show up, but values that were computed via cell do not show up in csv or pdf, they do show up in the table though

Pagination is disabled on page 1 ?How i can enable ??
it is working fine on page 2 and so on..

Ir shows no rows found for 2 3 seconds and after that renders the data even if data is already there. Please help

https://nimb.ws/HqQS0C

Hi, thanks for the nice package.
Can this package be used with functional components? because I could not see an example in your docs. If it supports functional components, please update the docs

I would love to be able to add a footer so I can calculate totals without that item sorting.

It would also be great to be able to do a custom component/custom title for pdf print

Hi There!

Thank you for doing this awesome project, I wanted to tell that I found a little issue when a user changes to watch all results in the list of the component only if the user is in another page, for example.

To reproduce:
Go to page 2 or 3 etc... and then select ALL results...
No results are found in the component...

if you please check it out. I'll be great
Thank you again and have a nice day

./node_modules/@ashvin27/react-datatable/lib/up-arrow.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Hi Ashvin, I'm trying to delete a row so that it disappears from the list without reloading but I don't know how to do it, I don't think it has it, but I wanted to ask you first to see if it is possible or should I try to modify the package.