Stack Overflow
Stack Overflow

Questions tagged [fixed-data-table]

Fixed Data Tables for React

FixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.

The table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of FixedDataTable and it's architected in a way to allow for flexibility and extensibility.

Features of FixedDataTable:

  • Fixed headers and footer
  • Both fixed and scrollable columns
  • Handling huge amounts of data
  • Variable row heights (with adaptive scroll positions)
  • Column resizing
  • Performant scrolling
  • Customizable styling
  • Jumping to a row or column
  • Controlled scroll API allows touch support
74 questions
1
vote
1 answer

Refer to column value of nested Javascript array with React

I have a Javascript array example that I wish to visualize in a table. Here's the array: var dataTable = [ { First: {In: "5 MB", Out: "6 MB"}, Second: {In: "5 MB", Out: "1 MB"}, Other: {In: "0.2 MB", Out:…
cbll
  • 6,499
  • 26
  • 74
  • 117
1
vote
1 answer

Handling huge amount of data in Fixed Data Tables

I am trying to use Fixed Data Tables in my Web Application, I am dealing with large amount of data like hundreds of thousands of records. I am trying to load all the data at a time to make the best use of Search and Sort functionalities of Data…
Harsha Vardhan
  • 411
  • 1
  • 7
  • 16
1
vote
1 answer

React fixed-data-table: Uncaught ReferenceError: Table is not defined

I'm using React together with a bootstrap template for front-end purposes. I intent to use fixed-data-table in a panel. Calling the function in a tag results in the below error in the browser: Uncaught ReferenceError: Table is not defined at…
cbll
  • 6,499
  • 26
  • 74
  • 117
1
vote
1 answer

Fixed Data Tables function onRowClick not returning row Data

Here is the Table Class, Im trying to return the row data object onRowClick in the Table options. when i log all three arguments the object returns empty. the index and click event console.log perfectly fine returning this here is the event: Proxy…
Kyas
  • 39
  • 2
  • 7
1
vote
2 answers

Optimize rendering loads of components in react

I'm developing electron-based standalone app with help of React and it envolves tables (many of them). To represent table data i use Facebook`s Fixed Data Table and i find it very efficient as well as overall awesome. The point is that i overbloated…
Ilya Lopukhin
  • 692
  • 8
  • 22
1
vote
0 answers

why can't I render the Column myself in a "helper" component?

I have the following SSCCE in React using fixed-data-table: const rows = [{name: 'Apple', desc: 'a popular fruit'}, {name: 'Cat', desc: 'a domesticated feline'}]; const App = React.createClass({ render: function() { …
Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331
1
vote
0 answers

how to left-align cells with the FixedDataTable library

I am trying to left-align cell values in my FixedDataTable implementation. Below is the code I am using: require('./app.css'); require('fixed-data-table/dist/fixed-data-table.min.css'); const $ = require('jquery'); const React =…
Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331
1
vote
0 answers

how can I hide the row of fixed data table with certain data from response

I have a nested data, parent rows and child rows in a fixed data table. What I want to do is to hide the child rows (identified by some property like non null parentId) initially. Parent row will have some link (show more) which when clicked will…
dhirajbasukala
  • 171
  • 2
  • 9
1
vote
1 answer

ReactJS Fixed-Data-Table and Async JSON for DataListStore

I am trying to learn ReactJS with ES6 along with setting up an instance of Fixed-Data-Table. I'm using the ObjectDataExample example from the github repo, but instead of the faker() values fed to the DataListStore, I want to use a DataListStore that…
Loic Duros
  • 5,472
  • 10
  • 43
  • 56
1
vote
1 answer

Sorting arrays and indexes

I have a problem with sorting a fixed data table. I tried to use this example: https://github.com/facebook/fixed-data-table/blob/master/examples/old/SortExample.js When I first sort by name descending, it sorts successfully and brings to the first…
javauser35
  • 1,177
  • 2
  • 14
  • 34
1
vote
1 answer

Unexpected token error for react fixed-data-table

I'm trying to get the fixed-data-table sample to work: import React from 'react'; import ReactDOM from 'react-dom'; import {Table, Column, Cell} from 'fixed-data-table'; // Table data as a list of array. const rows = [ ['a1', 'b1', 'c1'], …
user3075978
  • 775
  • 1
  • 8
  • 30
1
vote
1 answer

"Uncaught SyntaxError: Unexpected token { " using Reactify

I am following a tutorial to create a FixedDataTable with React. However, I have some issues getting the following line to work in my jsx-file: const {Table, Column, Cell} = require('fixed-data-table'); which gives the error (in Chrome): Uncaught…
Philip
  • 3,135
  • 2
  • 29
  • 43
1
vote
0 answers

React.js FixedDataTable - Row heights are not evaluated when table is re-rendered - scrollbar is missing

I have dynamic data in my table. The amount of data in a cell may change. I have implemented a rowHeightGetter method to calculate the height of a row. When I add content to a cell and rerender my table, the content appears and the cell is larger,…
Brian
  • 3,571
  • 7
  • 44
  • 70
1
vote
1 answer

calling child component from parent component in electron-es6-react

I am using electron with react es-6,i need to dispaly the data in fixed data table for that i wrote the code like this way here is main class code from here i am calling the the fixedTable export default class Main extends React.Component { …
Hussian Shaik
  • 2,559
  • 9
  • 37
  • 57
1
vote
1 answer

griddle-react: How can I externalize the rows settings from the settings menu

I want to separate the row settings from the separate settings menu in Griddle. The DataTables library has a good example on its homepage. I essentially want to recreate the DataTables layout but with the Griddle…
theptrk
  • 730
  • 9
  • 17
1 2
3
4 5