hyojin / material-ui-datatables Goto Github PK

I wasted time to install it and run the application, whatever it is showing in demo is completely opposite to show it in repo. No Pagination working, and NO filtering of data in table .. simply. nothing!!!

Kindly dont waste anyone time on this.

In case am wrong kindly revert back to this issue, i will show you what i feel wrong.

Thanks!

I am facing problem in key section.

const TABLE_COLUMNS = [
  {
    key: 'names',
  } 

Below is my Input data.

const TABLE_DATA = [
  {
    names:{
             name:"ABC"
    },
   names:{
             name:"XYZ"
    }  
}

Is it possible with Datatable?

<DataTables
          height={'auto'}
          columns={TABLE_COLUMNS}
          data={TABLE_DATA}
          selectedRows={this.state.selectedMachines}
          onRowSelection={this.rowSelection}
          showRowHover
          multiSelectable
          selectable
          showCheckboxes
          count={this.props.machineList.length}
          page={this.state.page}
          onRowSizeChange={this.onRowSizeChange}
          onNextPageClick={this.onNextPage}
          onPreviousPageClick={this.onPrevPage}
          rowSize={this.state.rowSize}
        />

in props onRowSelection the handler gets the index of the selected row, and when the page is changed the row is still selected, because the rows indexes will always be the same, where as the after the next page the data has changed.
Am I missing something or do i have the configurations wrong?
Any suggestions would be helpful.
just a note: pagination works fine, everything else works fine just the row selection is a problem.

like the picture shows. click the arrow button but no response. I don not know why.

Any way to add this?

tr:nth-child(odd) {
    background: silver;
}

Is it possible to add a property that shows the search field in the header initially?
At this point, you must press the filter button for the search field to appear.

update to react 16?

Is there a possibility to use <RaisedButton/> or <FlatButton/> in toolbar saving positions?

Opened filter displaces Button.

Hey,

It would be nice to get the dependency bumped to MUI 19. We could remove the react-tap-event-plugin dependency with that as well. Moreover, we would have React 16 compatibility (although this would probably work as it is with React 16)

Thanks

Syntax Error , Unexpected token, expected

The error is at column inside initialSort object
`

83 | initialSort={column: 'Name', order: 'asc'}
84 | showRowHover={true}
85 | showHeaderToolbar={true}
86 | showFooterToolbar={true}`

I am using [email protected]

Would it be possible to include material ui as a peer dependency instead of a regular dependency ?
So that users of material-ui-datatables won't ship duplicated versions of the material-ui packages.
(eg. version 1.20.0 as per latest material ui, and version 1.18.0 as per material-ui-datatables dependency)

Hi all,

Not sure if this is fixable within this lib due to limitations with pre-v1 MUI, but basically I am having this issue where the tooltip is getting cut-off by the end of its parent container. It only occurs with the final column nearest to the right of the container. So essentially this

Here is my <DataTable> component

<DataTable columns={columns}
        onSortOrderChange={this.props.onBidBuySortChange}
        showCheckboxes={false}
        height={'auto'} showRowHover selectable={false}
        data={this.props.view === 'Orders' ? this.props.topOrdersBidDataPruned : this.props.topTradesBuyDataPruned}
        showFooterToolbar={false} tableRowColumnStyle={tableTextStyle}
        tableHeaderColumnStyle={{
          wordWrap: 'break-word',
          whiteSpace: 'normal',
          overflow: 'visible'
        }}
        initialSort={this.props.initialBidBuySort} />

And the relevant entry for the column:

        {
          key: 'spreadToBestMeQuote',
          label: 'Avg. Spread to My Best Quote',
          sortable: true,
          tooltip: 'Average spread to the best bid/offer of this broker',
          render: (spread) => {
            if (numeral(spread).value() < 0) {
              return (<p style={{color: colors.red}}>{spread}</p>)
            } else {
              return (<p>{spread}</p>)
            }
          }
        }

Is there any workaround/hack I can use to get this to work?

Thanks

Hi, how can i disable pagination bar? I want to use infinite scroll
Thank you!

Hi hyojin.

How can I tell the componente what rows are enable to be selected or not ?

Table and TableRow componentes of material-ui has one "selectable" property that allows this

this it possible with your component ?

Search, filter, pagination vs. not working last version of react

index.js:33 TypeError: Cannot read property 'baseTheme' of undefined
at getStyles (DataTables.js:92)
at DataTables.render (DataTables.js:278)
at ReactCompositeComponent.js:796
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)

Long text in one columns overflows the column and is drawn over the other columns.
Anyway to prevent this?

My table is a little more complicated than simple linear data with a field and a value. I have nested data, for instance I have a media table and one particular media item may contain more than one 1 image listed in an internal array (nested array). I can pull the first image if such array like this (JSX):

<Avatar src={mediaItems.images[0].url} size={40} />

With a json like this

    exports.mediaItems = [
    {
	"name": "HTML5 Script",
	"images": [
		{
			"default": true,
			"id": 1,
			"url": "assets/images/media/html5.png",
			"type": "image"
		},
		{
			"default": false,
			"id": 2,
			"url": "assets/images/media/html5_2.jpg",
			"type": "image"
		}
	],
        }
    ]

Problem is, I don't see anywhere in your code how to inject JSX. I can do the following per your instructions to pull the Media Names in the json's media key:

 const TABLE_COLUMNS_SORT_STYLE = [
    {
	  key: 'name',
	  label: 'Media Name',
    },
 ];

However, even if I put the images in a first level (not nested in the media item), it still doesn't render the actual image but the path instead. So this below doesn't work

 const TABLE_COLUMNS_SORT_STYLE = [
    {
	  key: 'image',
	  label: 'Image',
    },
 ];

with this json

    exports.mediaItems = [
    {
	"name": "HTML5 Script",
	"image":"assets/images/media/html5.png",
        }
    ]

Would something similar to this below be supported?

 const TABLE_COLUMNS_SORT_STYLE = [
    {
	  label: 'Image', 
	  renderAs: function () {
		return <span><Avatar src={mediaData.images[0].url} size={40} /></span>;
	  }
    },
 ];

It is important for me (or other people) to be able to use JSX in the table to be able to add buttons, menus, images, icons, etc.

node_modules is part of the installed package. Presence of this node_modules containing the for dependencies material-ui-datatables is causing some unexpected errors.

Please remove and upload a new package to npm

I have uses sample code of Readme.
but it's not working about pagination.
if data count is 100, all data is displayed.
plz help me.

onRowSelection column index value coming as (actual - 1) i.e if i am clicking on 1 then its showing column 0 and if i click on 0 it gives me key error

Sorting, Paging, Filtering all don't work. Wasted half day on it.

Allow for row size & related controls to be hidden if rowSizeList is empty.

Or, an error should be thrown because the empty dropdown looks no good. Additionally, an option to disable the controls could be added along the lines of showHeaderToolbar.

Let me know if you would like me to send a PR.

do you know how can I have two separate events for checkbox when checkboxes option is enabled and row/cell selection as a separate event? Currently, when selectable option is true, then cell click event doesn't work but only row selection event gets trigger which selects the checkbox. Please help..

Thanks

How to show active page number and total page number menu like rows per page?

Hi there,

Any chance you'll add a prop that allows to always (by default) show the search bar or always hide the search bar (as it is right now)?

That is, toggle default mode from 'normal' to 'filter' in the implementation.

Hi,

I'm having some issues with the alignment of the columns to the rows using fixedHeader={true}. See below. I've placed a border on the 8th column using this column configuration (only shown for the 8th column with the border) like so:

{ key: 'sharesForOrder', label: 'Shares For Order', sortable:true, style:{ fontWeight: 'bold', borderLeft: '1px solid rgb(224,224,224)' } },

And my React element:

<DataTable height="700px" showRowHover={true} selectable={false} stripedRows={true} columns={tableColumns} data={data} showFooterToolbar={false} fixedHeader={true} tableHeaderColumnStyle={{borderLeft: 0}}/>

As you can see I tried to override the tableHeaderColumnStyle but still no good.

Any ideas what I could do to get it to line up?

Thanks!

It seems that none of the features advertised in this library works, including column sorting, pagination & search when I try to use the example given in the code.
None of these features don't even work in the demo given. How can I get these features to work correctly?

thanks

I have an array of users. "enabled" field can not be rendered, and console show this error:
warning.js:36 Warning: Failed prop type: Invalid prop children supplied to DataTablesRowColumn, expected a ReactNode.
in DataTablesRowColumn (created by DataTables)
in DataTables..............

const Users = [
{
id: newGuid(),
userName: "MasterUser",
userType: UserTypes.MASTER,
timeZone: "",
email: "[email protected]",
enabled: true,
test: true,
permissions: getUserPermission(UserTypes.MASTER)
}
]

Sorting in example does not work

First, I don't know why I have to add

  static childContextTypes =
  {
      muiTheme: React.PropTypes.object
  }

  getChildContext()
  {
      return {
          muiTheme: getMuiTheme()
      }
  }

to

class TagTable extends Component {

  render() {

    const {data} = this.props;

    return (
      <MuiThemeProvider>
        <DataTables
          height={'auto'}
          selectable={false}
          showRowHover={true}
          showHeaderToolbar={true}
          showFooterToolbar={true}
          columns={TABLE_COLUMNS}
          data={data}
          showCheckboxes={false}
          onCellClick={this.handleCellClick}
          onCellDoubleClick={this.handleCellDoubleClick}
          onFilterValueChange={this.handleFilterValueChange}
          onSortOrderChange={this.handleSortOrderChange}
          page={1}
          count={100}
        />
      </MuiThemeProvider>
    );
  }
}

Or it would complain

Uncaught TypeError: Cannot read property 'baseTheme' of undefined
    at getStyles (DataTables.js?7f0e:96)
    at DataTables.render (DataTables.js?7f0e:298)
    at eval (ReactCompositeComponent.js:795)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (

Even if I add theme, can not work well :
once click a button, the button would be masked by a gray layer.

@hyojin I have some issues when I am using it with v1 package.

Uncaught TypeError: Cannot read property 'baseTheme' of undefined at getStyles (DataTables.js:96) at DataTables.render (DataTables.js:298) at react-dom.js:5257 at measureLifeCyclePerf (react-dom.js:4537) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (react-dom.js:5256) at ReactCompositeComponentWrapper._renderValidatedComponent (react-dom.js:5283) at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4823) at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4719) at Object.mountComponent (react-dom.js:11551) at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4832)

even when I am using custom theme created.

I am using v1 beta 4

Can we add some sort of elegant solution for horizontal scrolling?

This is my component

Warning: Unknown prop onTouchTap on

Warning: Unknown prop `onCellDoubleClick` on <tbody> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in tbody (created by DataTablesTableBody)
    in ClickAwayListener (created by DataTablesTableBody)
    in DataTablesTableBody (at DataTables.js:356)
    in table (created by DataTablesTable)
    in div (created by DataTablesTable)
    in div (created by DataTablesTable)
    in DataTablesTable (at DataTables.js:312)
    in div (at DataTables.js:310)
    in DataTables (at index.js:153)

(Line numbers might be a bit out of sync)

Thanks for this great module.

I've found an issue. If the checkbox/selectable options are enabled (showCheckboxes=true), the sort functionality doesn't work. Also, when the second column has sort functionality, if you click on first column to sort then second column gets sorted but not first one. But if you select on All checkboxes (which selects all the rows with checkbox), then first column gets sorted. Can you please help on this..

Thanks

Is it possible to "mark" a row (e.g. with a different color) when it previously has been selected?

Could you please kindly consider adding one more example html file with the following features...Please kindly attach to the project examples folder as it would be helpful for many as well..

1.Read only grid as above without edit, delete and save option.
2. The grid with many export options - pdf, csv, excel, word etc.,
3. When the pagination is enabled - goto page option to navigate to particular page
4. Copy to clipboard and print option
5. Support quickest rendering for alteast 5,000 rows with page size as 10, 100, 500, 1000, 5000
6. Search all columns or individual columns
7. Export selected or all columns

Example grid
http://institut-de-genomique.github.io/Ultimate-DataTable/
https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/

Reference

1. http://2.bp.blogspot.com/-yTiytux2848/Vcj-b5FjyUI/AAAAAAAAdQk/8rzPAsyU4Dw/s1600/jQuery%2Bdatatables%2Bexport%2Bto%2Bpdf.png
   2 . https://www.phpflow.com/wp-content/uploads/2015/09/export-table-data-toexcel-png-pdf.png
   https://i.stack.imgur.com/XeCzz.png

my data is longer then the cell ,so I set overflow:auto or overflow:scroll to the columns but the contents beyond the scope of the cell are disappeared ,is it a bug? Or how should I deal with this situation

I just found you library and it looks good.
I do have a couple of questions.

Is it possible to show objects that are included in the "main" object?

I have a Subscription object, which includes both a Payment object and a list of Product objects.
Is it possible to show data from both the Payment object and the first Product object in the table, together with data from the Subscription object (all on the same line)?

Is it possible to define the format of how a date should be presented?

Thanks in advance.

I would like to implement search with specific key, and so some tuning like auto complete, or select bar within it.

Sorry but may i ask if there are any hints for the customization on the search bar?

I base on Meteor JS + Mongodb.
I get the data from Mongodb, and then attache it to data={TABLE_DATA} directly.
But I would like to formate any data field, example: createdDate Field: "DD/MM/YYYY".
Please example.

Hi hyojin,

How can I disable the all datatable? (search input, next, prev buttons, etc.).

This this would be very useful when the data is loading (eg. fetching from an API).

Is there a way to do that?

I would like to create customer column for Edit/Delete

Is there way in datatables that we can use so that column width is as per contents and can datatables be made scrollable