gwtmaterialdesign / gwt-material-table Goto Github PK

Reattach/onLoad of the MaterialDataPager widget, should not lead to re-initialization on state on the pager.

if it has been previously attached, that state should be persistent, if the user navigates away from the page and later return to that page, if no new MaterialDataPager object needs to be constructed (example case: @singleton pages with Errai)

At the moment I see no way to change the table header's icon (or hide it);
I also see no way of hiding the stretch icon (fullscreen/maximize).

Problems in that class : gwt.material.design.client.ui.pager.DataPager

1-
This code is invalid :

if (isLastPage() || currentPage == (totalRows / limit)) {
    iconNext.setEnabled(false);
}

When there are 11 elements for a 10 limit, the iconNext is disabled.

It should be :

if (!isNext()) {
    iconNext.setEnabled(false);
}

2-
initialize() method call on onLoad can be called many times, so handlers can be added many times.
And then go to next page button => go to many next pages.

Maybe some code like that should be used :

if(!initialized) {
    initialized = true;
    initialize();
}

Steps to recreate:

1. Navigate to http://gwtmaterialdesign.github.io/gwt-material-demo/#datatable
2. Scroll down to "Customize your data table"
3. Check the first table row (First Name = "Field 0")
4. Sort by First Name, ascending
5. Sort by First Name, descending

Expected result:

• The record with First Name "Field 0" remains checked

Actual result:

• The first table row remains checked, which is now First Name "Field 9"

Comments:

• I believe the problem is in AbstractDataView#renderRows() under the comment "Replace the rows element with the existing indexes element." The backing data (TableRows) is being sorted and rewritten into the existing RowComponents instead of each TableRow being permanently tied to a RowComponent and changing the order of the RowComponents in the DOM.

Hi!

When I try to create a GMDT according to the demo I always get the following error:

Uncaught TypeError: Cannot read property 'insert_11_g$' of undefined
at nag_g$.A2f_g$ [as addHeader_0_g$] (AbstractDataView.java:1849)
at nag_g$.B3f_g$ [as insertColumn_6_g$] (AbstractDataView.java:846)
at wDg_g$.nBg_g$ [as insertColumn_6_g$] (AbstractDataTable.java:406)
at wDg_g$.FDg_g$ [as insertColumn_6_g$] (MaterialDataTable.java:185)
at wDg_g$.AAg_g$ [as addColumn_8_g$] (AbstractDataTable.java:401)
at wDg_g$.zAg_g$ [as addColumn_7_g$] (AbstractDataTable.java:396)
at pRi_g$.C$i_g$ [as onLoad_1_g$] (DashboardTableView.java:142)

And stop the code in line:

table.addColumn(new WidgetColumn<Person, MaterialImage>() {...

I use the latest versions and inherent the following modules:

<inherits name="gwt.material.design.GwtMaterialWithJQueryDebug"/>
<inherits name="gwt.material.design.addins.GwtMaterialAddinsDebug"/>
<inherits name="gwt.material.design.GwtMaterialTableDebug"/>
<inherits name="gwt.material.design.jquery.JQuery" />

The table codes are running after created the view: view = uiBinder.createAndBindUi(this);

Unfortunately I have no idea whats wrong in my code.

Thanks!

Hi @BenDol

Having a DataTable with Categories inside a modal - when scrolling the subheader left / top position are miscalculated.

Best Regards,
Kevin

Please add a table footer (option) to data tables, with standard identical styling as the table body.

Control of actual adding can be done via the TableScaffolding class (with a default of null, which leads to it not being added in the apply(HasWidgets) method.

Also, please make TableScaffolding a interface and have a separate abstract base class.

Hello. I did some tests with the DataTable (1.0-rc3) addin and there is a strange issue.
Every time onLoad() is called the tabel is loading again. In a GWTP application onLoad() is called every time
you navigate back to the "DataTabel". --> (Same behavior in gwt-material-demo)

My Question is, how do remove (clear) the old DataSource from the table, and how do you prevent to load the table again:

On gwt-material-demo-master (Code):

  //List<Person>
  dataSource.remove(people);   // no effect, where to place?

  // Load the table again (GWTP)
  @Override
  protected void onLoad() {
    super.onLoad();
    // Loading Column again
    table.addColumn(new TextColumn<Person>() {
      @Override
      ...

Thanks

The pop-up menu should calculate the height of the widget
And float up or down

Following your row expansion example, I'd like to make an async call to retrieve additional information about a row's model when the row is expanded. However, your example doesn't show how you would retrieve information about the row's data in order to make such a request, and I've not been able to find the answer myself. Is this possible?

Thanks

Good morning_afternoon,

I would like to know how keep the values in column of a table. The field is MaterialTimePicker data type.

I created the column like this:

endtime = new WidgetColumn<Trabajo, MaterialTimePicker>() {
@OverRide
public MaterialTimePicker getValue(Trabajo object) {

Which event do I have to create in order to obtain the value set? To after work with the data.

Thank you very much.
Gastón

table.table tbody tr.expansion td div {
max-height: 0;
}

This causes any div to not display in the view. I was able to resolve the issue and make the expand animation work correctly by adding a descendent selector.

table.table tbody tr.expansion td > div {
max-height: 0;
}

Note this is probably releated to issue #2 MaterialButton Icon not displaying. I can put together a pull request later on this weekend.

I have tried Infinity datatable with request factory but its not working for me can you please prepare a example of infinity table with request factory.

I have a DataTable with some widgets embedded in table columns.

In my code I have something like:

//Port Name Column
        WidgetColumn<EthPortConfig, MaterialTextBox> portName = new WidgetColumn<EthPortConfig, MaterialTextBox>() {

            @Override
            public MaterialTextBox getValue(EthPortConfig object) {
                MaterialTextBox statusT = new MaterialTextBox();
                //statusT.setText(object.portName);
                statusT.setText("POE");
                ethPortConfigs.get(0).portName="POE";
                statusT.setWidth("80%");
                return statusT;
            }

        };

        portName.setFieldUpdater(new FieldUpdater<EthPortConfig, MaterialTextBox>() {
            @Override
            public void update(int i, EthPortConfig portConfig, MaterialTextBox widgets) {
                MaterialToast.fireToast("inside updater");
            }
        });

        ethInterfaceTable.addColumn(portName,"Port Name");

I expected the update method in the Updater to be called when writing into the TextBox but it is not happening, can anyone point in the right direction? What should I check?
Also the MaterialListBox is not firing any update event.

I didn't find any example in the gwt-material-demo and I cannot find a solution.

I have also some row press handlers, is it possible that they are blocking the field updater?

        // Configure the tables long press duration configuration.
        // The short press is when a click is held less than this duration.
        ethInterfaceTable.setLongPressDuration(400);

        // Add a row long press handler, called when a row is long pressed.
        ethInterfaceTable.addRowLongPressHandler((e, mouseEvent, model, row) -> {
            //GWT.log("Row Long Pressed: " + model.getId() + ", x:" + mouseEvent.getPageX() + ", y: " + mouseEvent.getPageY());
            MaterialToast.fireToast("Row long pressed");
            return true;
        });


        // Add a row short press handler, called when a row is short pressed.
        ethInterfaceTable.addRowShortPressHandler((e, mouseEvent, model, row) -> {
            //.log("Row Short Pressed: " + model.getId() + ", x:" + mouseEvent.getPageX() + ", y: " + mouseEvent.getPageY());

            EthPortConfig p = (EthPortConfig) model;
            MaterialToast.fireToast("Row short pressed");
            /*Cell.Context c = new Cell.Context($(row).index(),ethInterfaceTable.getColumnOffset(),model);
            portName.getCell().setValue(c,$(row).asElement(),portName.getValue(p));*/
            MaterialToast.fireToast("Content: "+portName.getValue(p).getText());
            return true;
        });

Hello, I have problems with the columns. My table is in a place of code that I do retrive any time and every time I do a retrive I create the columns of the tables again. How do I avoid this situation?
Thank you

I have included gwt-material-table into dependency into the pom.xml and updated the module descriptor, but when I compile I get this error (which go away when I remove gwt-material-table):

O] com.google.gwt.dev.jjs.InternalCompilerException: Unexpected error during visit.
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.translateException(JVisitor.java:121)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:296)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:285)
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.accept(JVisitor.java:128)
[INFO] 	at com.google.gwt.dev.jjs.ast.JCastOperation.traverse(JCastOperation.java:67)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:285)
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.accept(JVisitor.java:128)
[INFO] 	at com.google.gwt.dev.jjs.ast.JBinaryOperation.traverse(JBinaryOperation.java:83)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:285)
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.accept(JVisitor.java:128)
[INFO] 	at com.google.gwt.dev.jjs.ast.JExpressionStatement.traverse(JExpressionStatement.java:42)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor$ListContext.traverse(JModVisitor.java:95)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.acceptWithInsertRemove(JModVisitor.java:351)
[INFO] 	at com.google.gwt.dev.jjs.ast.JBlock.traverse(JBlock.java:92)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.accept(JVisitor.java:149)
[INFO] 	at com.google.gwt.dev.jjs.ast.JIfStatement.traverse(JIfStatement.java:53)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor$ListContext.traverse(JModVisitor.java:95)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.acceptWithInsertRemove(JModVisitor.java:351)
[INFO] 	at com.google.gwt.dev.jjs.ast.JBlock.traverse(JBlock.java:92)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.accept(JVisitor.java:149)
[INFO] 	at com.google.gwt.dev.jjs.ast.JVisitor.accept(JVisitor.java:145)
[INFO] 	at com.google.gwt.dev.jjs.ast.JMethodBody.traverse(JMethodBody.java:83)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:285)
[INFO] 	at com.google.gwt.dev.jjs.ast.JMethod.visitChildren(JMethod.java:600)
[INFO] 	at com.google.gwt.dev.jjs.ast.JMethod.traverse(JMethod.java:569)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:285)
[INFO] 	at com.google.gwt.dev.jjs.impl.UnifyAst.mainLoop(UnifyAst.java:1505)
[INFO] 	at com.google.gwt.dev.jjs.impl.UnifyAst.exec(UnifyAst.java:870)
[INFO] 	at com.google.gwt.dev.jjs.JavaToJavaScriptCompiler$Precompiler.unifyJavaAst(JavaToJavaScriptCompiler.java:1305)
[INFO] 	at com.google.gwt.dev.jjs.JavaToJavaScriptCompiler$Precompiler.constructJavaAst(JavaToJavaScriptCompiler.java:1038)
[INFO] 	at com.google.gwt.dev.jjs.JavaToJavaScriptCompiler$Precompiler.precompile(JavaToJavaScriptCompiler.java:954)
[INFO] 	at com.google.gwt.dev.jjs.MonolithicJavaToJavaScriptCompiler.precompile(MonolithicJavaToJavaScriptCompiler.java:303)
[INFO] 	at com.google.gwt.dev.jjs.JavaScriptCompiler.precompile(JavaScriptCompiler.java:38)
[INFO] 	at com.google.gwt.dev.Precompile.precompile(Precompile.java:286)
[INFO] 	at com.google.gwt.dev.Precompile.precompile(Precompile.java:229)
[INFO] 	at com.google.gwt.dev.Precompile.precompile(Precompile.java:145)
[INFO] 	at com.google.gwt.dev.Compiler.run(Compiler.java:206)
[INFO] 	at com.google.gwt.dev.codeserver.Recompiler.doCompile(Recompiler.java:333)
[INFO] 	at com.google.gwt.dev.codeserver.Recompiler.compile(Recompiler.java:161)
[INFO] 	at com.google.gwt.dev.codeserver.Recompiler.recompile(Recompiler.java:119)
[INFO] 	at com.google.gwt.dev.codeserver.Outbox.recompile(Outbox.java:128)
[INFO] 	at com.google.gwt.dev.codeserver.JobRunner.recompile(JobRunner.java:81)
[INFO] 	at com.google.gwt.dev.codeserver.JobRunner.access$100(JobRunner.java:34)
[INFO] 	at com.google.gwt.dev.codeserver.JobRunner$2.run(JobRunner.java:73)
[INFO] 	at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
[INFO] 	at java.util.concurrent.FutureTask.run(FutureTask.java:266)
[INFO] 	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
[INFO] 	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
[INFO] 	at java.lang.Thread.run(Thread.java:745)
[INFO] Caused by: java.lang.NoSuchMethodError: com.google.gwt.util.tools.Utility.close(Ljava/lang/AutoCloseable;)V
[INFO] 	at com.google.gwt.resources.rg.ImageResourceGenerator.getContentLength(ImageResourceGenerator.java:623)
[INFO] 	at com.google.gwt.resources.rg.ImageResourceGenerator.prepare(ImageResourceGenerator.java:584)
[INFO] 	at com.google.gwt.resources.rebind.context.AbstractClientBundleGenerator.initAndPrepare(AbstractClientBundleGenerator.java:1013)
[INFO] 	at com.google.gwt.resources.rebind.context.AbstractClientBundleGenerator.initAndPrepare(AbstractClientBundleGenerator.java:1039)
[INFO] 	at com.google.gwt.resources.rebind.context.AbstractClientBundleGenerator.generateIncrementally(AbstractClientBundleGenerator.java:419)
[INFO] 	at com.google.gwt.dev.javac.StandardGeneratorContext.runGeneratorIncrementally(StandardGeneratorContext.java:754)
[INFO] 	at com.google.gwt.dev.cfg.RuleGenerateWith.realize(RuleGenerateWith.java:160)
[INFO] 	at com.google.gwt.dev.shell.StandardRebindOracle$Rebinder.rebind(StandardRebindOracle.java:79)
[INFO] 	at com.google.gwt.dev.shell.StandardRebindOracle.rebind(StandardRebindOracle.java:276)
[INFO] 	at com.google.gwt.dev.shell.StandardRebindOracle.rebind(StandardRebindOracle.java:265)
[INFO] 	at com.google.gwt.dev.DistillerRebindPermutationOracle.getAllPossibleRebindAnswers(DistillerRebindPermutationOracle.java:87)
[INFO] 	at com.google.gwt.dev.jjs.impl.UnifyAst$UnifyVisitor.createStaticRebindExpression(UnifyAst.java:485)
[INFO] 	at com.google.gwt.dev.jjs.impl.UnifyAst$UnifyVisitor.createRebindExpression(UnifyAst.java:443)
[INFO] 	at com.google.gwt.dev.jjs.impl.UnifyAst$UnifyVisitor.handleMagicMethodCall(UnifyAst.java:576)
[INFO] 	at com.google.gwt.dev.jjs.impl.UnifyAst$UnifyVisitor.endVisit(UnifyAst.java:306)
[INFO] 	at com.google.gwt.dev.jjs.ast.JMethodCall.traverse(JMethodCall.java:248)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.traverse(JModVisitor.java:381)
[INFO] 	at com.google.gwt.dev.jjs.ast.JModVisitor.accept(JModVisitor.java:293)
[INFO] 	... 59 more
[INFO]             [ERROR] at SimplePager.java(220): GWT.create(SimplePager$Resources.class)
[INFO]                com.google.gwt.dev.jjs.ast.JMethodCall
[INFO]             [ERROR] at SimplePager.java(220): (SimplePager$Resources) GWT.create(SimplePager$Resources.class)
[INFO]                com.google.gwt.dev.jjs.ast.JCastOperation
[INFO]             [ERROR] at SimplePager.java(220): SimplePager.DEFAULT_RESOURCES = (SimplePager$Resources) GWT.create(SimplePager$Resources.class)
[INFO]                com.google.gwt.dev.jjs.ast.JBinaryOperation
[INFO]             [ERROR] at SimplePager.java(220): SimplePager.DEFAULT_RESOURCES = (SimplePager$Resources) GWT.create(SimplePager$Resources.class)
[INFO]                com.google.gwt.dev.jjs.ast.JExpressionStatement
[INFO]             [ERROR] at SimplePager.java(219): {
[INFO]   SimplePager.DEFAULT_RESOURCES = (SimplePager$Resources) GWT.create(SimplePager$Resources.class);
[INFO] }
[INFO]                com.google.gwt.dev.jjs.ast.JBlock
[INFO]             [ERROR] at SimplePager.java(219): if (SimplePager.DEFAULT_RESOURCES == null) {
[INFO]   SimplePager.DEFAULT_RESOURCES = (SimplePager$Resources) GWT.create(SimplePager$Resources.class);
[INFO] }
[INFO]                com.google.gwt.dev.jjs.ast.JIfStatement
[INFO]             [ERROR] at SimplePager.java(218): {
[INFO]   if (SimplePager.DEFAULT_RESOURCES == null) {
[INFO]     SimplePager.DEFAULT_RESOURCES = (SimplePager$Resources) GWT.create(SimplePager$Resources.class);
[INFO]   }
[INFO]   return SimplePager.DEFAULT_RESOURCES;
[INFO] }
[INFO]                com.google.gwt.dev.jjs.ast.JBlock
[INFO]             [ERROR] at SimplePager.java(218): {
[INFO]   if (SimplePager.DEFAULT_RESOURCES == null) {
[INFO]     SimplePager.DEFAULT_RESOURCES = (SimplePager$Resources) GWT.create(SimplePager$Resources.class);
[INFO]   }
[INFO]   return SimplePager.DEFAULT_RESOURCES;
[INFO] }
[INFO]                com.google.gwt.dev.jjs.ast.JMethodBody
[INFO]             [ERROR] at SimplePager.java(218): private static SimplePager$Resources getDefaultResources();
[INFO] 
[INFO]                com.google.gwt.dev.jjs.ast.JMethod
[INFO]       [ERROR] Compiler returned false
[INFO]       [WARN] recompile failed
[INFO]       [WARN] continuing to serve previous version

In an infinite data view, I wanted to update the rendering of a row for a model without reloading the data from the data source.

I had to add this:

public void modelUpdated(final T model) {
		RowComponent<T> modelRow = null;
		for (final RowComponent<T> row : rows) {
			if (row.getData().equals(model)) {
				modelRow = row;
				break;
			}
		}
		if (modelRow != null) {
			modelRow.setRedraw(true);
			modelRow.setData(model);
			renderComponent(modelRow);
		}
	}

and the corresponding call in MaterialDataTable. Seems like it would be something to consider adding. to AbstractDataView, or did I miss something obvious?

I tried to implement an AsyncPageTable but all my attempts failed.

I was using a ListDataSource, overwriting the load(startIndex, viewSize) method to call a presenter method when the list has to load data from a remote data source. When the presenter has loaded it's List of models, those were passed to the ListDataSource's .add(startIndex, list) method. But the row data were never shown (even tho the data was loaded correctly and assigned correctly to the right index (0) of the DataSource instance.

I played around a lot with different ways of finding a way that works. I even ended up with setting pager and all it's properties manually; calling refreshView(), calling setRedraw(true), setVisibleRange() etc. pp. but I never saw the data actually rendered with an Async data source.

In the end I tried to use InfiniteDataSource and this worked right away, out-of-the-box.

But could you please create a working example of an AsyncPageTable connected to a (Async)ListDataSource that is filled with data dynamically from a remote data source? (including paging, sorting etc.) This would be great! :-)

MaterialDataPager is initialized twice, once in MaterialWidget.onLoad and once in MaterialDataPager.onLoad. The next button is bound twice, skipping a page when next is pressed.

hi,
I just created a test project with tbroyer's gwt-maven-plugin with only one EntryPoint class:

public class Main implements EntryPoint {
    @Override
    public void onModuleLoad() {
        MaterialDataTable pageTable = new MaterialDataTable();
        pageTable.getTableTitle().setText("Table");
    }
}

after "mvn package" the project, the module was compiled successfully. and when accessing the host page, the browser's console printed out this message:

websites-0.js:2341 Uncaught TypeError: Cannot read property 'textMixin' of undefined
    at Array.init (websites-0.js:2341)
    at initializeModules (websites-0.js:39)
    at apply_0 (websites-0.js:630)
    at entry0 (websites-0.js:679)
    at websites-0.js:653
    at gwtOnLoad_0 (websites-0.js:52)
    at websites-0.js:7978
init	@	websites-0.js:2341
initializeModules	@	websites-0.js:39
apply_0	@	websites-0.js:630
entry0	@	websites-0.js:679
(anonymous)	@	websites-0.js:653
gwtOnLoad_0	@	websites-0.js:52
(anonymous)	@	websites-0.js:7978

and the version of gwt-material is 2.0-rc4, the version of gwt-material-table is 1.0-rc4. the gwt version is 2.8.1

Hi
If you want to hide a table-column (equal a Person-ID) on all devices i found no possibility to do this.
The best thing i found is to hide on medium device and up.

        @Override
        public HideOn getHideOn() {
           return HideOn.fromStyleName("hide-on-med-and-up");
        }

but on a small device (0 - 520px) the ID-column is shown.
Using GMD 2.0-rc5
Thanks

I would like to know if there is a direct way to remove all rows from a table.

ex:
table.removeAll();

Only when resizing the browser window, the following JS exception shows up in the console:

Exception: com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'isAttached_0_g$' of null
ConsoleLogger.java:32TypeError: Cannot read property 'isAttached_0_g$' of null
at Wnw_g$ as lambda$0_27_g$
at npw_g$ as execute_1_g$
at VDj_g$ (SchedulerImpl.java:50)
at zDj_g$ (SchedulerImpl.java:183)
at uDj_g$ as flushPostEventPumpCommands_0_g$
at NDj_g$ as execute_2_g$
at rDj_g$ (SchedulerImpl.java:141)
at eCj_g$ (Impl.java:233)
at hCj_g$ (Impl.java:285)
at Impl.java:71
at callback_0_g$ (SchedulerImpl.java:196)

It seems to depend on the resize/reloading of the data of MaterialInfiniteDataTable

Hello,

there seems to be an issue with the floating table header on mobile devices. Just open the demo page on a mobile device of your choice and scroll around on a table. The floating header stays in the same position for a second before floating upwards where it should be, which makes for a real awkward user experience.

I already tried using the stickyHeader attribute but to no avail.

thx and kr

Chris

In all examples table is initialized inside Composite widget in onLoad().
I'm using GWTP and I have tried to initialize table inisde View constructor but failed because widget is not attached to DOM in this time.
Which is the better place to initialize table inside GWTP view if I don't want to create Composite widget for each table?

Great work on this widget. thanks. Running into this weird issue, i tried everything. I am using the material table on a project it runs well on SDM , once is deployed the vertical scroll starts throwing a NPE on every scroll in a infinite data view. here the transpiled js

returnTemp = $onScrollY((lastArg = ($location_0[stackIndex] = 'InfiniteDataView.java:' + '213' , this.$$outer_0) , castToNative(arg0, $wnd.gwt.material.design.jquery.client.api.jQuery) , lastArg));

$wnd.gwt is undefined. Any ideas?

Thanks a lot.

Through Ivy or maven is impossible to find gwt-material-table
"unresolved dependency: com.github.gwtmaterialdesign#gwt-material-table;+: not found"

I think it would be a good idea to have configuration properties set to false by default, so you can opt-in, if you want a special feature (row expansion etc.) instead of have to set a set of properties to opt-out from them :)

<span class="table-header">Дата блокировки</span>

th span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: 100px; */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

Why does the table header have a maximum width of 100px?

With the latest release of GWT , we need also to update the gwt-material related projects to gwt 2.8.0 rc1.
Also the gwt-maven-plugin 2.8.0 rc1.

With the latest changes we need also to update the javax-servlet version to 3.1.0 to avoid the javaxservletconfiguration class not found exception.

After calling MaterialDataTable.removeColumn column is still in the column selector menu....

using 2.0 rc4

It would be nice to have the option to change row font color or row background color based on row content. It is possible with the gwt datagrid.

It looks like the onLoad sets the the boolean setup to true. I think this should probably be moved to the public void setup(TableScaffolding scaffolding) method. The problem I am having is that I am trying to configure the table before it is loaded into the view. The issue is that I am getting a null pointer exception when trying to add the first header. I traced this back to the onLoad method not being called without it being added to the dom. If the boolean isSetup was assigned true in the setup(TableScaffolding scaffolding) method I would be able to call setup with the default table scaffolding and the onload event would not run when the table is loaded but with the logic the way it is. If I call setup and then the onLoad event is called the setup will be called twice.

The documentation for gwt.material.design.client.ui.table.cell.Column<T, C> states that the member name should identify that column in a data query:

    /**
     * @return the database name of the column, or null if it's never been set
     */
    public String getName() {
        return name;
    }
...
    /**
     * Sets a string that identifies this column in a data query.
     * 
     * @param name name of the column from the data store's perspective
     */
    public void setName(String name) {
        this.name = name;
    }

However, AbstractDataView will always override this property, setting it to the column's header value before going on to add the header to the table:

    @Override
    public void insertColumn(int beforeIndex, Column<T, ?> column, String header) {
        // Allow insert at the end.
        if (beforeIndex != getColumnCount()) {
            checkColumnBounds(beforeIndex);
        }

        // Set the columns name
        column.setName(header);

        int index = beforeIndex + getColumnOffset();

        TableHeader th = renderer.drawColumnHeader(column, header, index);
...

If the intention of Column#name is for easily getting a name used for data queries, it should not be set to the column's header. If the intent is simply to store the header in the column, then the documentation should reflect this.

Hello,

this might be a pretty easy question but I cannot find an answer for it in the code.

Is there a way to set a specific column as the default sort - if I have a table with a few columns I want to have the table sorted after the first column by default.

thanks and kind regards

Hi together
After update the table-addin to version 1.0-SNAPSHOT or 1.0-rc4 the table-definition is deleted after back navigation. I can't reload it anymore. Thank you for resolving this issue.

Problem in that class : gwt.material.design.client.data.ListDataSource

When there are less item in table than the limit, an error occurs.
The corresponding line is :

final List<T> subList = data.subList(loadConfig.getOffset(),
        (loadConfig.getOffset() + loadConfig.getLimit()));

I whote that fix :

int size = loadConfig.getOffset() + loadConfig.getLimit();
if(size > data.size()){
    size = data.size();
}
final List<T> subList = size == 0 ? new ArrayList<>() : data.subList(loadConfig.getOffset(), size);

The idea of column filters is, to give the user a way of filtering the grid for specific data, per column.

It would allow the user to enter a value for that the column's content is filtered for.

If a filter widget is set for a column, it could be rendered e.g. inside of the column's header (below the title) or e.g. in a row right below a header / sub-header. The size of the widgets would be 100% of the columns width (also resizing when the column width changes); the height would be the organic height of the filters widget.

The filter values could be read on filter widget change (ValueChangeEvent) and set on the data provider instance. The data provider then reloads the current page. Those filter values could also be persistent and remembered on pagination, sorting etc. events (depending on the impl. of the data provider).

To allow a first attempt of an implementation, it would be already sufficient, if we could put widgets in column headers (to be rendered below the header's title, like the image above shows) , because then, all the custom column filter logic could be implemented in user-land code (or as a plugin for the MaterialTable).

For a most simple implementation (leaving a lot to be impl. in user-land) it would be sufficient if the API of MaterialDataTable would support:

public void insertColumn(int beforeIndex, Column<T, ?> col, MaterialWidget header);
public MaterialWidget getColumnHeader(int index);

Thanks and best,
Aron

gwt-material-table 1.0-rc3
If you load a datatable source in the background programmatically and then you
move to the page with the datatable all table-rows are placed at one row.

Refresh:

      table.setRedraw(true);
      table.refreshView();

If you refresh, or do a click to the table-row, the rows expand as expected.

Where is my mistake and how can i prevent this behavior.
Thank you

Usually for data table it is good idea to use multiply sort columns.
It will be better to add such possibility to all interfaces before 1.0 release.

I see two variants how to implement that:

1. Just make List instead of plain SortContext, in LoadConfig and other depending classed.
2. Add class like "Sorter" and place List inside SortContext.
   Seems that second solution is more nice.

Hi @BenDol ,

The icons are still + / - instead of my custom implementation of folder open / close.
Here is the sample project to reproduce the project.
https://github.com/GwtMaterialDesign/gwt-material-demo/tree/bug/table_65
Thanks in advance.

Using this:
standardTable.setRowHeight(33);
don't change anything.

Hello!

Currently there is not remote sort / remote paging support in the table.

Remote sort: I can take sort context from dataView.getSortContext() and make sorting in the backend side but no sort arrows are displayed in column headers until I will setup sortComparator. I have tried to override isSrotable to return "true", but no affect.

For the paging: DataSource.getDataSize() is called only once and in synced context, so it is impossible to setup total data rows count from the remote request.

Also I found that width of the columns is not static. It can be changed during paging depending on the content width. So it is possible to keep column width persistent during paging?

There seems to be an issue on MaterialDataTabel - its not possible to update the rowFactory to change the category model.

This is my sample on AccountRowFactory.

public class AccountRowFactory extends RowComponentFactory<Account> {

        private CategorizedBy categorizedBy;

        public AccountRowFactory(CategorizedBy categorizedBy) {
            this.categorizedBy = categorizedBy;
        }

        @Override
        public RowComponent<Account> generate(Account account) {
            return super.generate(account);
        }

        @Override
        public String getCategory(Account account) {

            if (categorizedBy == CategorizedBy.NOTES) {
                return itemMap.get(account).getNotes();
            } else if (categorizedBy == CategorizedBy.GROUP) {
                return itemMap.get(account).getGroup();
            } else {
                return account.getRoot().getName();
            }
        }
    }

and here is the implementation

public void categorizedBy(CategorizedBy value) {
        //TODO File an Issue to Data Table when setting the row factory
        dataTable.setRowFactory(new AccountRowFactory(value));
        this.dataTable.setRowData(0, toList(this.itemMap));
        dataTable.setRedraw(true);
        dataTable.refreshView();
    }

I am able to update the datatable with newly created categories but there is a clearing issue with previously applied category. The Subheaders are still there and needs to be removed.

@BenDol Do you have any idea why the datatable category is not updated / removed and reapply the newly set AccountRowFactory

I have such options

    <inherits name="gwt.material.design.GwtMaterialWithJQuery"/>
    <inherits name="gwt.material.design.GwtMaterialTable"/>
    <inherits name="gwt.material.design.jquery.JQuery"/>
    <inherits name="gwt.material.design.GwtMaterialDesignBasic"/>
    <inherits name="gwt.material.design.themes.ThemeBlue"/>

Componetns from gwt-materialdesign work fine

But materialtables... Not =(

Currently I use MaterialInfiniteDataTable that uses always Remote sort and this is great.
What I can not understand is why there is a need to invoke method renderRows(rows) inside AbstractDataView.sort(...) method? I suppose (but I am not sure, please correct me ) that this method (renderRows(rows)) is odd when InfiniteDataView is used. In a table where I have about 85 columns and initially about 26 rows after I click on some header to sort - there is some delay (it takes about 7-8 sec) until asc/desc row appears on header and request for new sorted data is sent. After I try to debug what is going on under the hood I have found that renderRows(rows) is the most time consumable method and depends on the number of RomComponent`s that is has to render(for a table with e.g. 20 columns this delay is not so visible).

Another problem with Remote sort is cached rows on client side. Looks that if we have sorted our table, we do not have to check if we have cached rows on client but load rows from data source always. In other case row with incorrect order are shown in table until we load the new (non-cached) rows from data source.

When I add columns in this method as in example, all work fine.

protected void onLoad() {
super.onLoad();
...
}

But when I add columns after table have been created, I have error

Exception caught: Exception caught: (TypeError) : Cannot read property 'insert_37_g$' of undefined
H3f_g$ @ AdminConsole-0.js:84934
AdminConsole-0.js:84930 Exception: com.google.gwt.event.shared.UmbrellaException: Exception caught: Exception caught: (TypeError) : Cannot read property 'insert_37_g$' of undefined
AdminConsole-0.js:84934 Error: com.google.gwt.event.shared.UmbrellaException: Exception caught: Exception caught: (TypeError) : Cannot read property 'insert_37_g$' of undefined
at oLc_g$.g1_g$ [as createError_0_g$] (AdminConsole-0.js:18358:10)
at oLc_g$.q1_g$ [as initializeBackingError_0_g$] (AdminConsole-0.js:18413:43)
at oLc_g$.a1_g$ (AdminConsole-0.js:18274:8)
at oLc_g$.G1_g$ (AdminConsole-0.js:18512:9)
at oLc_g$.O1_g$ (AdminConsole-0.js:18559:9)
at oLc_g$.hLc_g$ (AdminConsole-0.js:29041:9)
at oLc_g$ (AdminConsole-0.js:29105:10)
at nKc_g$.qKc_g$ [as fireEvent_0_g$] (AdminConsole-0.js:28653:20)
at _vd_g$.bwd_g$ [as fireEvent_0_g$] (AdminConsole-0.js:39089:22)
at OJc_g$ (AdminConsole-0.js:28549:17)
at _vd_g$.cwd_g$ [as fireValueChangedEvent_0_g$] (AdminConsole-0.js:39093:3)
at Uvd_g$ (AdminConsole-0.js:39032:29)
at X9_g$ (AdminConsole-0.js:19616:28)
at $9_g$ (AdminConsole-0.js:19672:16)
at AdminConsole-0.js:19652:14
H3f_g$ @ AdminConsole-0.js:84934
AdminConsole-0.js:84930 Caused by: com.google.web.bindery.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'insert_37_g$' of undefined

Hello,

I am using the Table version 1 rc3.

If i have 30 columns -

chrome it took 2 sec to add column

firefox it took 10 sec to add column

is there something we could do , or is it something related to browser optimizations

I try remove columns

    public void removeColumns() {
        logger.info(consoleTable.getColumns().size() + "");
        while (consoleTable.getColumns().size() > 0) {
            logger.info(consoleTable.getColumns().size() + " - ");
            consoleTable.removeColumn(0);
        }
    }

But have error

com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'parentNode' of undefined
     at Unknown.QEc_g$(Node.java:190)
     at Unknown.aFc_g$(Node.java:307)
     at Unknown.xeh_g$(MaterialDataTable.java:218)
     at Unknown.zLj_g$(ConsoleTable.java:171)
     at Unknown.dC_g$(ClientsView.java:129)
     at Unknown.zA_g$(ClientsPresenter.java:253)
     at Unknown.yA_g$(ClientsPresenter.java:89)
     at Unknown.ab_g$(PresenterWidget.java:574)
     at Unknown.qb_g$(PresenterWidget.java:378)
     at Unknown.pb_g$(PresenterWidget.java:347)
     at Unknown.vVf_g$(RevealContentHandler.java:60)
     at Unknown.BVf_g$(RevealContentHandler.java:58)
     at Unknown.Z7b_g$(SchedulerImpl.java:50)
     at Unknown.D7b_g$(SchedulerImpl.java:183)
     at Unknown.y7b_g$(SchedulerImpl.java:347)
     at Unknown.R7b_g$(SchedulerImpl.java:78)
     at Unknown.v7b_g$(SchedulerImpl.java:141)
     at Unknown.i6b_g$(Impl.java:239)
     at Unknown.l6b_g$(Impl.java:291)
     at Unknown.anonymous(Impl.java:77)

Please see attached for better explanation.