joaocarmo / react-smart-data-table Goto Github PK

The problem with searching data in the table. If you do a pagination and try to make a search from the last page. The result is not displayed. Condition: per page of 10 lines, you are on the 10th page and you are searching for "Lo". A pagination is displayed, but not the result itself.

Filtering causes the following error
(Something went wrong ! SyntaxError: unterminated character class)
if, '(' or '[' is entered in filter input field.

Escaping with '' works, but then selection(coloring) wont work. Any work arounds, please.

And extremely thankful for react-smart-data-table. Really helpful.

Currently the column headers are disappearing if data object is empty. I want column headers fixed, if empty data object provided. Also how to view 'No records found' text if data object is empty. ?

import SmartDataTable from 'react-smart-data-table' when I add this this throws

Uncaught SyntaxError: Unexpected token import

Expected Behavior

Should show me the table with the data

Actual Behavior

Throwin error "ReferenceError: self is not defined"

Steps to Reproduce

Import the package and writing <SmartDataTable /> in the render function

Screenshot

Your Environment

Blitz.js is the fullstack framework includes Node.js, Next.js (Server-side rendering), React and Prisma.

ERROR in .//react-smart-data-table/lib/SmartDataTable.js
Module parse failed: C:\Project\Toro-Front-End\node_modules\react-smart-data-table\lib\SmartDataTable.js Unexpected token (114:6)
You may need an appropriate loader to handle this file type.
| ) : 'rsdt-sortable-icon'
| return (
| <i className={'rsdt ' + sortingIcon} onClick={(e) => { this.handleSortChange(column) }} />
| );
| }
@ .//react-smart-data-table/lib/index.js 2:0-45
@ ./src/components/OrderManagementTable.js
@ ./src/components/OrderManagement.js
@ ./src/components/App.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:3000 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://0.0.0.0:3000 webpack/hot/only-dev-server babel-polyfill whatwg-fetch ./src/index

Expected Behavior

When using props 'headers' to override a column's header name, it should only change the name of the header.

Actual Behavior

It creates a duplicate of that same column. (See CO2 Reduced in attached photo)

Screenshot

Edit

Getting this error:

Encountered two children with the same key, cO2Redcued. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

PS. The entire team really likes your table, btw! We're using it for a class project and it really helped save us some time. Thank you!!

Quoting an email I received from JA:

I would like to suggest a new feature: Include a prop or an option to hide the paginator if the results per page were less than the perPage prop. Because I think in this case is a little unuseful.

Expected Behavior

Hide the paginator if the results per page were less than the perPage prop.

Actual Behavior

Paginator is always visible.

Steps to Reproduce

const App = () => (
  <SmartDataTable
    data={data.slice(0,5)}
    perPage={10}
  />
)

ReactDOM.render(<App />, document.getElementById('app'))

Screenshot

• None

Your Environment

• None

Got this error when trying to use with webpack

ERROR in ./node_modules/react-smart-data-table/lib/SmartDataTable.js
Module parse failed: Unexpected token (114:6)
You may need an appropriate loader to handle this file type.
| ) : 'rsdt-sortable-icon'
| return (
| <i className={'rsdt ' + sortingIcon} onClick={(e) => { this.handleSortChange(column) }} />
| );
| }
@ ./node_modules/react-smart-data-table/lib/index.js 2:0-45

yarn build

yarn run v1.17.3
warning ../package.json: No license field
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

./node_modules/react-smart-data-table/dist/react-smart-data-table.js:8:558 

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm trying to implement some sort of multi-row select to perform an operation on the selected items. Icould simply add a checkbox in a column, but I'd prefer a more accessible solution giving a different background color to selected items. Is there a way to assign styles/classes to these rows?

Contrary to what the documentation says, react-smart-data-table is not fully compatible with Semantic UI's Pagination component. Passing the default Pagination component directly to the paginator prop yields the following error in the browser console:

Warning: React does not recognize the `perPage` prop on a DOM element. If you
intentionally want it to appear in the DOM as a custom attribute, spell it as
lowercase `perpage` instead. If you accidentally passed it from a parent component,
remove it from the DOM element.

I've created a repository with a runnable example of this error here.

This happens because react-smart-data-table is passing down more props than necessary to the custom paginator component, and by default Semantic UI's Pagination is passing down those props to native DOM elements.

Edit: I opened a PR with a proposed fix.

Hi,
I am using this tool for quite some time now recently we had to use this to parse a JSON that had 150 fields, we found that the columns selector is getting clumsy. We thought of having "SELECT ALL" and "DESELECT ALL" will be really helpful since users are only selecting 10-20 fields at a time. Also is there a way we can save these settings?

thanks a lot for the tool, you don't believe it saved us a lot of man-hours. :)

Appreciate it if you help us with the above enhancement. Thanks once again

Hi.. thanks for this awesome component !

Btw, is there a way to order the columns ? Maybe we can add some sort of 'position' field in headers

Hello,

Is there a way to implement a rowDoubleClick() Event ?
Sometimes it is better not to select a row with a single click, because every time a user (accidentally ) clicks in the table, the single click event is triggered.

I have imported like
import SmartDataTable from 'react-smart-data-table';

then got error

./node_modules/react-smart-data-table/lib/SmartDataTable.js Module parse failed: Unexpected token (137:6) You may need an appropriate loader to handle this file type. | } | return ( | <i | className={rsdt ${sortingIcon}} | onClick={() => this.handleSortChange(column)}

Please help with this.

https://imgur.com/a/GAig8

Failed to compile.

./node_modules/react-smart-data-table/lib/SmartDataTable.js
Module parse failed: Unexpected token (114:6)
You may need an appropriate loader to handle this file type.
| ) : 'rsdt-sortable-icon'
| return (
| <i className={'rsdt ' + sortingIcon} onClick={(e) => { this.handleSortChange(column) }} />
| );
| }

I think this would be an awesome library to use for a reactjs application, but it looks like I cannot even import SmartDataTable.

Details on error:

./node_modules/react-smart-data-table/lib/SmartDataTable.js
Module parse failed: /Users/ryanlee/src/live-alerts-frontend/live-alerts/node_modules/react-smart-data-table/lib/SmartDataTable.js Unexpected token (114:6)
You may need an appropriate loader to handle this file type.
| ) : 'rsdt-sortable-icon'
| return (
| <i className={'rsdt ' + sortingIcon} onClick={(e) => { this.handleSortChange(column) }} />
| );
| }

Hello @joaocarmo ,

just my next question ...

I try to figure out how to set the table initially to a different page.
Lets say the route entry url looks like ../whatever/fancy/page/2 . Now I listen to an activePage param, here the 2 .

Is there a way to handle this ?

Hi,

Firstly, a fantastic module and very nearly perfect for my requirements but I am having an issue getting custom headers to display. It always displays the data set I am passing it (passed on as a prop from its parent from an axios request).

Here's a relevant snippet of my code:

const headers = {
columnKey: {
text: 'Id',
invisible: true,
sortable: false,
filterable: false
},
columnKey: {
text: 'Title',
invisible: false,
sortable: true,
filterable: true
},
columnKey: {
text: 'First Name',
invisible: false,
sortable: true,
filterable: true
},
columnKey: {
text: 'Last Name',
invisible: false,
sortable: true,
filterable: true
},
columnKey: {
text: 'Full Name',
invisible: false,
sortable: true,
filterable: true
},
columnKey: {
text: 'Post Code',
invisible: false,
sortable: true,
filterable: true
},
columnKey: {
text: 'Email',
invisible: false,
sortable: true,
filterable: true
},
columnKey: {
text: 'Unique Reference',
invisible: false,
sortable: true,
filterable: true
},
tableActions: {
text: 'Placeholder',
invisible: false,
transform: (value, index, row) => {
return (
<button onClick={() => console.log("the button worked")}>Show Details
)
}
}
}

<SmartDataTable
data={data}
dataKey=''
headers={headers}
name='test-table'
filterValue={filterValue}
perPage={perPage}
sortable
withLinks
withHeader
loader={(

Many thanks in advance and keep up the great work!

Problem

I'm trying to use the autopaginator using the "perPage" property, the paginator appears and it modifies the number of pages depending on the total number of results, but the first page shows all the rows and when you click on the next page it never change because all the rows are in the first page.

Expected Behavior

I expect it to show 2 pages with 5 rows per page, and when I click on next page It shows the other 5 remaining

Actual Behavior

It shows 2 pages but in the first page there are all the the rows (10 rows). And it shoulds only show 5 per page.

Steps to Reproduce

<SmartDataTable data="https://jsonplaceholder.typicode.com/users" dataKey="" name="test-table" className="ui compact selectable table" perPage='5' />

Screenshot

Your Environment

When I installed via NPM I have to force it because I'm using react 17.0.1 and It needs the dependency ^16.8.0

Expected Behavior

Can we use specific alignment ?, if yes, then how we can do that.
Suppose I want to do right align in right with header and data .

I am looking to replace Ag-Grid but it has a feature I can’t do without.
I did not see the option for columns to be resizable by user. Do you have it?
My components refresh the data every 30 seconds, with Ag-Grid I can save the column width, sorts and filters before the redraw and can restore them after.

Will I be able to do it with react-smart-data-table?

The keys in the object has the names such as "Last 1K P99 requests"

Expected Behavior

The header should have "Last 1K P99 requests"

Actual Behavior

"Last K P requests"

Steps to Reproduce

Pass on the keys with Integers in the names

Screenshot

if an API returns that a load with multiple rows, let's say
row1: k1:v1,k2:v2,k3:v3
row2:k1:va1,k2:va2,k3:va3,k4:va4

in row K4 was empty so JSON did not return that key.

Expected Behavior

the table should be as

| K1 | K2| K3 | K4|

|V1 | V2 |. V3 |. |

|Va1 | Va2 |Va3 |Va4 |

Actual Behavior

instead, it only displays 3 columns ignoring 4th column since 1st row doesn't have it
| K1 | K2| K3 |

|V1 | V2 |. V3 |

|Va1 | Va2 |Va3 |

maybe it is only considering columns from 1st row only ignoring the rest

Not sure why it's not rendering. The array shows fine in console. Here is the DOM - https://imgur.com/a/o1lVT

Here is my code

import React from 'react';
import SmartDataTable from './react-smart-data-table';
import Axios from 'axios';

class BuildInfoLoader extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      buildInfoCollection: []
    }
  }

  fetchAllBuilds = () => {
    const endpoint = '/r/api/v1/apps/builds';
    Axios.get(endpoint)
      .then((response) => {
        console.log('response', response.data.builds)
        this.setState({
          buildInfoCollection: response.data.builds
        })
      })
      .catch((error) => {
        // console.log(error);
      });
  }

  componentDidMount() {
    this.fetchAllBuilds();
  }

  render() {
    return (
      <div>
        <SmartDataTable
          data={this.state.buildInfoCollection}
          name='Build Info'
          className='ui compact selectable table'
          sortable
        />
    </div>
    );
  }
}

export default BuildInfoLoader;

Hello, thanks for this nice component.
Will you consider adding some sort of customization for the "pagination" ?
like localization or maybe simple arrows ?

Thanks again

I'm having trouble updating the table when new data is available.
The work flow is this:
User enters value into input
-> clicks search
-> search function makes an API call
-> new data is stored to this.state

Here is the sample code:

import { Container, Input, Divider } from 'semantic-ui-react';
import { Auth } from 'aws-amplify';
import { TableExamplePagination } from '../components';
import SmartDataTable from 'react-smart-data-table'

export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {};
        this.search = this.search.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        Auth.currentUserInfo()
            .then(user => this.setState({ user: user }))
            .catch(err => console.log(err));
    }

    handleChange = (e, { name, value }) => this.setState({ [name]: value });

    search() {
      var apiBase = 'https://api.example.com?address='
      var url = apiBase + this.state['searchAddress']
      fetch(url)
      .then(response => response.json())
      .then(data => this.setState({ ['transactions']: data }));

    }

    memberView() {
        const { user } = this.state;
        const { transactions } = this.state;
        
        return (
            <Container>
                <Input fluid action={{ content: 'Search', onClick: this.search }} placeholder='Address...'
                onChange={this.handleChange}
                name="searchAddress"
                />
                <Divider horizontal />
                {!transactions ? '' : <SmartDataTable
                  data={transactions['from']}
                  name='from-table'
                  className='ui compact selectable table'
                  sortable
                />}
                <Divider horizontal />
                {!transactions ? '' : <SmartDataTable
                  data={transactions['to']}
                  name='from-table'
                  className='ui compact selectable table'
                  sortable
                />}

                <Divider horizontal />

            </Container>
        )
    }

    guestView() {
        return (
            <Container>Guest Home</Container>
        )
    }

    render() {
        const { authState } = this.props;
        return (
            <div id="home-module">
                { authState === 'signedIn'? this.memberView(this.props) : this.guestView() }
            </div>
        );
    }
}

Thanks for taking a look!