Giter VIP home page Giter VIP logo

Comments (6)

jeffreygaggino avatar jeffreygaggino commented on June 7, 2024

Love working with the system by the way much easier to use than tanstack tables. Especially for working with simple row data.

from active-table.

OvidijusParsiunas avatar OvidijusParsiunas commented on June 7, 2024

Hi @jeffreygaggino.

The changeTextFunc property already serves as a post-processor/cleanup function.

I don't think I fully understand the problem that you are describing, could you elaborate on how does it make it difficult to send data to the server? Or could you perhaps illustrate the step by step process that is causing the difficulty.

Thanks!

from active-table.

jeffreygaggino avatar jeffreygaggino commented on June 7, 2024

Front end wise I want to show 12% to the user. At least from my understanding with using the table it seems like I've got to change the actual data to "12%". I would rather want to keep the data to be 0.12 and show to the user "12%". So have a function that doesn't mutate the original value of 0.12 but allows regex / text transformations to display 0.12 as "12%". When they edit it reverts back to the "real" value of 0.12

from active-table.

jeffreygaggino avatar jeffreygaggino commented on June 7, 2024

Here's a couple of images to illustrate this:
Editing:
Screenshot 2024-02-22 at 8 38 20 am

Display when not editing:
Screenshot 2024-02-22 at 8 38 36 am

from active-table.

OvidijusParsiunas avatar OvidijusParsiunas commented on June 7, 2024

Hey @jeffreygaggino.

Active Table's internal code has been built to only work with actual values from the table cells, hence it is unable to handle pseudo data. For your case, you will unfortunately have to either maintain some sort of an alternative table in your app's state with the help of onCellUpdate or onDataUpdate events where you can postprocess the changed data to your liking or you can alternatively preprocess the data before it goes to your server.

In regards to the two images above, I can see the value is turned into a percentage - except the percentage is processed incorrectly. You will need to upgrade the changeTextFunc function for better processing, e.g (raw JavaScript):

changeTextFunc: (cellText) => {
  if (/^\d*\.?\d+%$/.test(cellText)) {
    return cellText;
  }
  return `${(Number(cellText.replace(/[^0-9.]+/g, '')) * 100).toFixed(2)}%`;
}

This code can be further enhanced for better percentage processing.

from active-table.

calin-dobos avatar calin-dobos commented on June 7, 2024

Hi,

From what I understand changeTextFunc is only called when the cell value actually changes. Exposing "cell-focus" and "cell-blur" events might allow two way conversion.

from active-table.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.