Products

[Markov]

Hi,

The demo i sent you shows how to render components inside the table cells. We do not have a specific ready-made example for a button inside a table cell, but you can follow the same approach as in the provided example.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The smart-table is not like the native table html tag. It has differerent API and functionality. Please, refer to the demos and docs about Smart.Table in order to learn how to use it – https://www.htmlelements.com/docs/table/ and https://www.htmlelements.com/demos/table/overview/

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

If you need to disable the editing of a given column, set allowEdit: false to that column.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

We have a demo which shows how to add custom content in the cells of the Table component. Please, check this https://www.htmlelements.com/demos/table/bootstrap-integration/

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

We tested this example and unfortunately, we could not reproduce the reported behavior with the latest version of Smart UI.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can try this:

import React, { useRef, useEffect } from "react";
import { Grid } from "smart-webcomponents-react/grid";
import "smart-webcomponents-react/source/styles/smart.default.css";

function App() {
  const gridRef = useRef(null);

  useEffect(() => {
    const dataAdapter = new window.Smart.DataAdapter({
      virtualDataSourceLength: 1000, // Total number of records (can be updated dynamically)
      virtualDataSource: function (resultCallbackFunction, details) {
        const { pageIndex, pageSize, sortColumns } = details;
        const sort = sortColumns.map(sc => <code>${sc.dataField},${sc.sortOrder}</code>).join(';');

        fetch(<code>/users?page=${pageIndex}&size=${pageSize}&sort=${sort}</code>)
          .then(response => response.json())
          .then(data => {
            resultCallbackFunction({
              dataSource: data.content,
              virtualDataSourceLength: data.totalElements
            });
          });
      },
      dataFields: [
        'id: number',
        'name: string',
        'age: number'
      ]
    });

    gridRef.current.dataSource = dataAdapter;
  }, []);

  return (
    <Grid
      ref={gridRef}
      paging={{ enabled: true, pageSize: 10 }}
      sorting={{ enabled: true }}
      columns={[
        { label: 'ID', dataField: 'id', width: 50 },
        { label: 'Name', dataField: 'name' },
        { label: 'Age', dataField: 'age', width: 80 }
      ]}
    />
  );
}

User.java

import jakarta.persistence.*;

@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;
private int age;

public User() {}

public User(String name, int age) {
this.name = name;
this.age = age;
}

// Getters and Setters
public Long getId() { return id; }
public String getName() { return name; }
public int getAge() { return age; }

public void setId(Long id) { this.id = id; }
public void setName(String name) { this.name = name; }
public void setAge(int age) { this.age = age; }
}`

UserRepository.java

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {}

UserController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.*;
import org.springframework.web.bind.annotation.*;

import java.util.*;

@RestController
@RequestMapping("/users")
@CrossOrigin(origins = "*")
public class UserController {

    @Autowired
    private UserRepository repo;

    @GetMapping
    public Map<String, Object> getUsers(
            @RequestParam int page,
            @RequestParam int size,
            @RequestParam(required = false, defaultValue = "id,asc") String sort
    ) {
        String[] parts = sort.split(",");
        Sort.Direction direction = Sort.Direction.fromString(parts[1]);
        String field = parts[0];

        Pageable pageable = PageRequest.of(page, size, Sort.by(direction, field));
        Page<User> result = repo.findAll(pageable);

        Map<String, Object> response = new HashMap<>();
        response.put("content", result.getContent());
        response.put("totalElements", result.getTotalElements());

        return response;
    }
}

DataSeeder.java

import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;
import org.springframework.beans.factory.annotation.Autowired;

@Component
public class DataSeeder implements CommandLineRunner {
    @Autowired
    private UserRepository repo;

    @Override
    public void run(String... args) {
        if (repo.count() == 0) {
            for (int i = 1; i <= 100; i++) {
                repo.save(new User("User " + i, 20 + (i % 10)));
            }
        }
    }
}

DemoApplication.java

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Peter,

What you’re experiencing is controlled by the property: editing.addNewRow.autoCreate
When this property is true, the grid automatically adds a new empty row (dimmed) when the user scrolls down past the last row using the grid’s scrollbar or keyboard arrows. If you want to turn off this behavior, you should set it to false. This will stop the grid from adding new rows automatically on scrolling past the bottom.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The daterangeinput uses Intl.DateTimeFormat for dates formatting. More details on: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat. The dateFormat property of the DateRangeInput can be set to an object like {day: “number”, month: “number”, year: “number”}. For available list of properties, please check the tutorial from the link which was provided here.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com

[Markov]

Hi Dark Beccio,

The property overrides the default behavior and allows you to put a custom one. It is like replacing a list of rules with a blank one.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

We will extend the editor’s behavior for pasting Excel tables in the next release.

Thanks for the feedback.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The localization process includes 2 things – settings the messages property and defining messages for a given locale and then setting the locale property.

For example, define messages[‘kr’] = ‘json object for a component’. Then set the locale to ‘kr’. All messages used by a component can be seen in its API page.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi matdjon,

Take a look at https://www.htmlelements.com/demos/scheduler/view-timeline/

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Scott,

It does not return an instance of the table so will need to use ID or CSS class querySelector.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Ok, you can try something else then – add a hidden input and sync it with the value of the dropdownlist when the dropdownlist’s value is changed i.e subscribe to the “change” event of the dropdownlist. In the event handler, set the value of the hidden input.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The solution is to set the dropDownAppendto property of the ComboBox and also set its “name” property which is used in the form submit.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts