ovidijusparsiunas / active-table Goto Github PK

View Code? Open in Web Editor NEW

165.0 6.0 10.0 26.81 MB

Framework agnostic table component for editable data experience.

Home Page: https://activetable.io

License: MIT License

HTML 0.16% JavaScript 5.03% TypeScript 72.23% CSS 1.60% MDX 20.98%

angular component edit editable editable-grid editable-table grid javascript react solid

active-table's People

Contributors

Stargazers

Watchers

Forkers

ictserv metakin taivu lnstadrum zkcode srmurali002 the-hated-one cubode

active-table's Issues

Is it possible to translate the table elements?

I would like to translate elements of the table like +New, Delete and such. Is that possible?

Using active-table in a Flask app

Hi,

I'm trying to use active-table in my Flask app by including the JS bundle in my HTML code but I get the following error:

activeTable.bundle.js:870 Uncaught SyntaxError: Unexpected token 'export' (at activeTable.bundle.js:870:10591)

Any idea why?

'cell-update' event seems to return wrong details

Hi @OvidijusParsiunas ,

When using the the 'cell-update' event listener:

when the component is loaded, first n-1 rows have updateType: "Update", while the last one has updateType: "Add"
when deleting any row, the rowIndex for updateType: "Removed" is always the last one.

While visually the last row of the table is always the one to be actually removed, the rowIndex should point to the original row in the data source, so in case we use "Sort Ascending"/"Sort Descending" we can still track the logical row that was deleted.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/activeTable.bundle.js" type="module"></script>
</head>
<body>
<active-table id="at"
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326]]'
></active-table>
<script>
var tableElementRef = document.getElementById("at");
tableElementRef.addEventListener('cell-update', (cellUpdate) => {
  console.log(cellUpdate.detail);
});
</script>
</body>
</html>

ERROR: ResizeObserver loop completed with undelivered notifications.

Using ActiveTable on React project. Sample code:

      <ActiveTable
        ref={activeTableRef}
        tableStyle={{
          "width": "100%"
        }}
        data={[
          ['Planet', 'Diameter', 'Mass'],
          ['Earth', 1, 1],
          ['Mars', 1, 1],
        ]}
      />

Resizing window quickly:

Uncaught runtime errors:
×
ERROR
ResizeObserver loop completed with undelivered notifications.
    at handleError (http://localhost:3001/static/js/bundle.js:38010:58)
    at http://localhost:3001/static/js/bundle.js:38029:7

Importing the same file twice on Chrome

Hello there :)

I just discovered a new bug in Chrome that breaks importCSV functionality, at least having my custom buttons and calling importCSV:

I have a table with data
Delete all the rows
Import a CSV -> OK
Delete all the rows
Import the same CSV -> Nothing is imported

Console doesn't output any message.

Any guidance on this?

Searching select box

I would like to suggest a feature. When you have a select as a field type to be able to type and filter options.

Documentation example code doesn't work in Svelte and Vue

Adding tableStyle appears to break in both Svelte and Vue. Svelte example below:

<main>
   <h1>Active Table:</h1>
  <active-table
    displayAddNewColumn = false
    displayAddNewRow=false
    content={content}
    frameComponentsStyles={JSON.stringify(frameComponentsStyles)}
    headerStyles={'{"default":{"backgroundColor": "#d6d6d630"}}'}
+    tableStyle='{
+      "borderRadius": "10px",
+      "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px",
+      "width":"100%"
+    }'
  />
</main>```

Use peer dependencies for React

Hi.
The active-table-react package works fine on a React 17 project but the package-lock.json lists its dependency being react 18. I there any way to make that dependency fixed?

React: Module not found: Error: Can't resolve...

This thread is used to troubleshoot an es6 module resolve compilation error that appears to affect some apps when using the react package active-table-react. The error bears some of the following syntax:

Module not found: Error: Can't resolve './utils/outerTableComponents/pagination/paginationInternalUtils' in '/Users/ovidijusparsiunas/Desktop/sample-projects/my-app/node_modules/active-table/dist' Did you mean 'paginationInternalUtils.js'? BREAKING CHANGE: The request './utils/outerTableComponents/pagination/paginationInternalUtils' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

Get Update whenever table changed

Hi, NextJS newbie here. i found this table is very impressive.

May i ask how to get udpate whenever i type inside in the table?

<ActiveTable
          onCellUpdate = {(cellUpdate) => { console.log(cellUpdate); }}
          pagination={true}
          displayAddNewColumn={false}
          columnDropdown={{displaySettings: {isAvailable: false}}}
          customColumnsSettings={[
            { "headerName": "Item", "cellStyle": {"backgroundColor": "#f8f8f8"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false },
            { "headerName": "Description", "cellStyle": {"width": "150px"}, "isHeaderTextEditable": false },
            { "headerName": "Quantity", "cellStyle": {"backgroundColor": "#fdfdfd"}, "defaultColumnTypeName": "number", "isHeaderTextEditable": false },
            { "headerName": "Material", "cellStyle": {"backgroundColor": "#f1f1f1"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false }
          ]}
          tableStyle={{borderRadius: "10px", width:"100%"}}
          content={content}
          headerStyles={{ default: { backgroundColor: "#d6d6d630" } }}
        />

i did try to update using onCellUpdate but no feedback in the console unfortunately.

Feature: data filtering

Hi there (again :D)

I am writing to request a new feature, specifically, I am interested in having the ability to add a filter to the select columns, allowing users to search for specific options in the dropdown list.

As it stands, the select columns are incredibly useful, but they can become unwieldy when there are many options to choose from. Having a filter would make it much easier for users to quickly locate the options they need.

Thank you for your time and consideration.

Thks 😃

how to sponsor

Hello guys,

I love your product!

This is good work. Really good work.

I've been searching for this exact thing for over 3 years.

Please tell me how I can sponsor.

Cannot read properties of null (reading 'offsetWidth')

I'm implementing a data table with Active Table in my Next.js project, and I've started getting an error whenever trying to resize the width of my page.

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'offsetWidth')

Call Stack
ParentResize.shouldRerenderTable
node_modules/active-table/dist/utils/render/parentResize.js (19:0)
ActiveTable.resizeCallback
node_modules/active-table/dist/utils/render/parentResize.js (25:0)

I've never used Lit before, but it seems like parentElement might not be defined on at.

CSV export is missing formatting options to be useful

Hey, the CSV export is doing a simple join(',') on each row and a join('\n') on all rows.

CSV actually supports (depending on the flavour different things including specifying the delimiter, having quoted fields, even having newlines in quoted fields and so on and so on.

To be useful I would at least say that we need an option to quote all fields and therefore "escape" the " inside of a field..

https://github.com/OvidijusParsiunas/active-table/blob/main/component/src/utils/outerTableComponents/files/CSV/CSVExport.ts#L5

Example:

const csvData = 'data:text/csv;charset=utf-8,' + at.data.map((e) => '"' + e.map((d) => d.replaceAll('"', '""')).join('","') + '"').join('\n');

It would be probably nice to expose a generic options element to the buttons: [{ export: {} }] element, where you can configure this.

Cannot find module error while compiling

Hello, I encountered a problem while compiling my project. I don't know if it's because of me.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/vercel/path0/node_modules/active-table/dist/utils/outerTableComponents/pagination/paginationInternalUtils' imported from /vercel/path0/node_modules/active-table/dist/activeTable.js
--
04:57:24.692 | at new NodeError (node:internal/errors:405:5)
04:57:24.692 | at finalizeResolution (node:internal/modules/esm/resolve:327:11)
04:57:24.692 | at moduleResolve (node:internal/modules/esm/resolve:946:10)
04:57:24.693 | at defaultResolve (node:internal/modules/esm/resolve:1132:11)
04:57:24.693 | at nextResolve (node:internal/modules/esm/loader:163:28)
04:57:24.693 | at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
04:57:24.693 | at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
04:57:24.693 | at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
04:57:24.694 | at link (node:internal/modules/esm/module_job:76:36) {
04:57:24.694 | code: 'ERR_MODULE_NOT_FOUND'

Custom column type select with dynamic options

Hi,

I'm trying to implement column type like this

const opts = ['a','b']
lineitems.customColumnTypes = [];
lineitems.customColumnTypes.push({
  name: "Roba",
    select: {
       options: opts,
       canAddMoreOptions: false
       },
  iconSettings: { reusableIconName: "select"}
  })

That works if I call it directly, but when I want to get some data via api and then try to do the same thing in a separate method it doesn't.

How could I make options dynamic in selects. For the reference here is code I'm trying to implement in google scripts

<script>
  const lineitems = document.getElementById("lineitems");
  lineitems.data = [
     ["Roba", "Cijena", "Popust", "Količina", "Ukupno"],
     ["","","","",""],
  ];
    
    // this line only fetches the data from google sheet and passes it to onGetProductsSuccess
    google.script.run.withSuccessHandler(onGetProductsSuccess).withUserObject(lineitems).aGetProducts();

    function onGetProductsSuccess(products, lineitems) {
      const opts = ["a","b"]
      //console.log(lineitems)
      lineitems.customColumnTypes = [];
      lineitems.customColumnTypes.push({
        name: "Roba",
        select: {
          options: opts,
          canAddMoreOptions: false
           },
        iconSettings: { reusableIconName: "select"}
        })
        
      products.forEach(function(product) { 
        lineitems.customColumnTypes[0].select.options.push(product[1])
      });
      
     // console.log(lineitems)
    }
</script>

Yet that doesn't work.

not explaining the usage process

create a detailed instructions document on workflow and usage methods

Embedding custom HTML inside table cells

Is there a way to render custom html inside table cells?

I am trying to use active-table to render a list page. The first column is supposed to have links that open another page.

Currently, the examples on the activetable.io website are all about rendering a table with data. I am not finding any example of a table with html inside the cells.

<ActiveTable
                data={activeTableData}
                tableStyle={{
                    width: '100%',
                }}

                displayAddNewColumn={false}
                frameComponentsStyles={{
                    styles: {
                        default: {
                            // backgroundColor: 'pink'
                        }
                    }
                }}
                headerStyles={{
                    default: {
                        backgroundColor: 'pink'
                    }
                }}
                rowHoverStyles={{
                    style: {
                        backgroundColor: '#d6d6d630',
                        "transitionDuration": "0.1s"
                    }
                }}
                // stripedRows={{
                //     odd: {
                //         backgroundColor: ''
                //     },
                //     even: {
                //         backgroundColor: '#ebebeb7a'
                //     }
                // }}
                rowDropdown={{
                    displaySettings: {
                        isAvailable: false
                    },
                    canEditHeaderRow: false
                }}
                columnDropdown={{
                    displaySettings: {

                        // isAvailable: false

                    },
                    isInsertLeftAvailable: false,
                    isInsertRightAvailable: false,
                    // is
                }}
                filter={true}
                isCellTextEditable={false}
                allowDuplicateHeaders={false}
                contentEditable={false}
                displayAddNewRow={false}
            />

JS table data not captured

Hi @OvidijusParsiunas ,

I've a table like so

which, when exported, yields a CSV file (table_data.csv) that doesn't fully represent the data entered in the web component. I see the same problem when I access the table data using the method elementRef.getData(): the data is incomplete.

Any idea why?

Javascript code for table creation:

make_active_table = function(activeTable, tableData) {
    activeTable.data = tableData;
    activeTable.setAttribute(
        "tableStyle",
        JSON.stringify({
            "width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px",
        })
    );
    activeTable.setAttribute(
        "files",
        JSON.stringify({
            "buttons": [
              {
                "import": true,
                "styles": {
                  "default": {
                    "backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
                  },
                  "hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
                },
                "text": "Import File",
                "position": "top-left",
                "order": 1
              },
              {
                "export": true,
                "styles": {
                  "default": {
                    "backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
                  },
                  "hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
                },
                "text": "Export File",
                "position": "top-left",
                "order": 0
              }
            ]
        })
    );
    return activeTable;
}

HTML side:

<div id="billTableDiv">
    <active-table id="billTable" headerStyles='{"default":{"backgroundColor": "#d6d6d630"}}'></active-table>
</div>

<button type="submit" class="btn btn-primary" onclick="beforeSubmit();">Save</button>

<script>
function beforeSubmit() {
    const invalidForm = document.querySelector('form:invalid');
    if (!invalidForm) {
        $("#spinner").modal('show');
    }
    activeTable = document.getElementById("billTable");
    document.getElementById("formField").value = JSON.stringify(activeTable.getData());
}
...
setTimeout(() => {
    billTable = make_active_table(document.getElementById("billTable"), {{ bill_table|safe }})
});
</script>

Cannot get basic example running

Hello,

I am trying to add active-table to my project but I get an error straight away. The installation (npm install active-table) worked fine, adding 7 packages. But as soon as I add the component to my page, i get the following:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\manioko\source\repos\NewUISvelte\node_modules\active-table\dist\utils\outerTableComponents\pagination\paginationInternalUtils' imported from C:\Users\manioko\source\repos\NewUISvelte\node_modules\active-table\dist\activeTable.js
at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:226:11)
at moduleResolve (node:internal/modules/esm/resolve:839:10)
at defaultResolve (node:internal/modules/esm/resolve:1069:11)
at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:305:12)
at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:156:32)
at ModuleWrap. (node:internal/modules/esm/module_job:76:33)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

Any idea what might be causing this? Apologies if I am missing something obvious... :/

Feature Requests Enter key

Hey, great work on this plugin!

Here are some ideas that would improve usability for data entry

Enter key

I would love to be able to disable making newline characters on Enter key input.
In the meantime I solved it by wrapping the active table element in this div:

<div on:keydown={handleInput}>
</div>

with the following javascript

function handleInput(event) {
    if (event.keyCode == 13){
    event.preventDefault(); }}

Additionally what would be great user experience are following customizable settings on what to do on Enter key:

Confirm your changes after input with Enter or revert back to the original cell value otherwise
Being able to hop into the next row in the same column on Enter key, analogous to what Tab does in a row.
As far as I've seen there is no function to set the cursor to a specific cell, so I don't know how difficult that would be.

See example for the result of all 3 features.

How to re-render/refresh the table content?

Hi, is there a way to re-render active table with let's say updated number of rows? From my attempts, it seems like it is not...please note I am far from expert :)

Based on user input, I would like to update the element with newly changed number of rows. Alternative would be to render the element not on page load, but after user interaction.

I tried adding manually rendering it by inserting active-table using insertAdjacentElement/insertAdjacentHTML among other things, but no luck.

P.S.
Vanilla JS - no frameworks used

Styling with classes

How hard would it be to implement passing css-classes to active-table for styling table elements? If you drop active-table into an existing design or use a css framework with utility classes (ie Tailwind) this would really help the DX. Really digging a lot of the design decisions of the lib otherwise! 👍

Text font changing after the component is loaded

Component text font quickly changes after the component is loaded.

Filter not working when setting it as an attribute in sveltekit

When adding filter="true" to the active-table element in my sveltekit app, or a filter with an object or array of objects, it breaks the table. It should also be noted that the same thing happens on your sveltekit repo at https://codesandbox.io/p/sandbox/active-table-sveltekit-forked-fy9wlf

How to implement server related features with active-table ?

Great work on the project so far. Kudos for your efforts.

Is there a way to interact with server data with active-table component.
- For eg. if I would like to paginate data or filter data in a database via an api
- For eg. if I would like to save data shown in active-table component to database via an api
will active-table work in SSR mode. for eg. can I render a page in sveltekit SSR mode with active-table component in it ?

Wish you good luck for your efforts.

Improvement Suggestion: Change Cursor Type for Non-Editable Select Cells

Hey there,

I've been working with your library for table implementation and I've noticed something that could use a bit of improvement. When dealing with cells of type 'select' and the isCellTextEditable property set to false, I observed that the cursor remains a pointer when hovering over these cells. I think it would be more user-friendly if the cursor changed to 'not-allowed' or a similar style to indicate that the cell is not editable.

Making this adjustment would enhance the user experience by providing clearer visual feedback, especially when users try to interact with non-editable cells.

Could you consider making this change in an upcoming update? I believe it would make a positive difference in the usability of the library.

Thanks! :)

Change styling based on screen size

A quick note for dynamically changing the component styling based on browser media specs.

Validate CSV file integrity

Currently, the import functionality allows users to import various types of files when uploading data. I propose implementing a file type control feature to restrict users to upload only CSV files.

The proposed solution would involve adding a file type validation function that checks the uploaded file's format before processing it. If the uploaded file is not a CSV file, the importCSV function will return an error in order to control the error and improve the user experience

Thank you for considering this proposal.

Table becomes laggy when displaying a long table

Hi @OvidijusParsiunas, I tried using Activetable with NextJs to display a really long table (around 1000 lines) and the scrolling experience is laggy + my browser freezes after a minute or two. Do you have any advice on how to tackle this problem? Thanks

This is a sandbox example: https://codesandbox.io/p/sandbox/active-table-react-xlsx-forked-5z7y65?file=%2Fsrc%2Findex.tsx
You can try uploading this file and you'll see the UI become frozen:
mock long data.csv

Screen.Recording.2024-04-01.at.15.52.59.mov

Modify exported CSV file name and maintain/keep rows on import

Hello there,

I'm currently using your library on Angular, and I'm encountering a couple of issues with the CSV export and import functionality.

Firstly, the exported CSV files are always named "table_data.csv" and there seems to be no way to modify the file name. Could you please consider adding an option to change the file name during export?

Secondly, when I import a CSV file, the headers are not maintained. Additionally, the documentation states that the importCSV function returns a ColumnsDetails object, but it does not seem to return anything at all. Is there a way to intercept the end of the import process so that I can modify the data to add my headers?

I appreciate your hard work on this library, and I would be grateful if you could please look into these issues and provide any guidance or assistance. Thank you very much!

Best regards,

Vue 2 / Nuxt 2 passing objects and hyphen/kebab case properties

Thanks for a great component! Surprisingly, one of the few out there that is actively being worked on.

A few notes about how I got this working in Vue 2 (you don't mention Vue version in your docs, but your sandbox example uses Vue 3, so maybe this is unique to Vue 2 or Nuxt 2):

I have to JSON.stringify(content) myself before passing it to <active-table> as a prop, otherwise Vue will do its own serialization which is NOT JSON.
The same is true for object-based props like columnDropdown
My eslint rules require hyphenated prop names, which I think is fairly common. I wrapped <active-table> with  (and enable after) to silence these errors.

Provide display options for columnType

Currently when you want to display a "$" sign or "%" you've got to change the raw data:

 customColumnTypes='[
  {
    "name": "Custom type",
    "customTextProcessing": {
      "changeTextFunc": "(cellText) => `$${Number(cellText.replace(/[^0-9.-]+/g,\"\"))}`",
      "changeStyleFunc": "(cellText) => {
        const moneyNumber = Number(cellText.replace(/[^0-9.-]+/g,\"\"));
        if (moneyNumber < 20) return {backgroundColor: `#ff3232`};
        if (moneyNumber < 100) return {backgroundColor: `#ffff00`};
        return {backgroundColor: `#00ac00`};
      }"
  }}]'

So for example 0.12 should show as 12%. However to get it working you need to change the actual value to 12%. This is bad when when you have to send it back to a server.

Recommendation for a "changeDisplayFunc" function. It would happen after changeTextFunc (for example cleaning data to only display numbers). In the example 0.12:


customColumnTypes='[
  {
    "name": "Percentage",
    "customTextProcessing": {
      "changeDisplayFunc": (cellText) => `${Number(cellText) * 100 }%`
  }}]'

Documentation example tables not appearing on small screens

When the screen dimensions are small e.g. a phone screen, the tables inside the documentation are not displayed.

CSV import doesn't support escaped commas

When trying to import a CSV file that has data with escaped commas, you get extra columns.

Example CSV

name,description
Test,"Hi, this doesn't work"

Expected

The table is built with two columns like this:

name | description
-----+--------------------
Test | Hi, this doesn't work

Actual

We get an extra column like this:

name | description |
-----+-------------|------------------
Test | Hi          | this doesn't work