ente v1.0.4

ente/StickyTable

StickyTable React component is a Table which renders only visible cells.

1 000 000 rows to show from browser memory? Not a problem at all!

more features

• conditional formatting
• selected cells
• memorized cell //use ctrl+click
• custom styles
• non-fixed row-height
• etc

Install

npm install --save ente


// to create an application from scratch:
npx create-react-app demo-app-sticky-table
cd demo-app-sticky-table
npm install --save styled-components prop-types
//replace App.js to one of Usage-examples,
npm start

Usage 1

import React from "react";
import styled from 'styled-components'
import {
  StickyColumn,
  StickyTable,
  StyledFullScreenDemo,
} from "ente";

const StyledCellCustom = styled.td`
  color: darkslategray;

  background-color: ${(props) => {
  const { isMemorized, isSelected , value} = props.cell
  if (value>5)return 'red'
  if (isMemorized && isSelected) return '#54de54'
  if (isMemorized) return 'palegreen'
  if (isSelected) return '#d0e3f3'
}};

  padding: 4px;
`

function App() {
  const dataSource = [];
  dataSource.push([["name"], ["v1"], ["v2"], ["v3"], ["v4"], ["v5"], ["v6"]]);
  dataSource.push([["(name)"], ["(v1)"], ["(v2)"], ["(v3)"], ["(v4)"], ["(v5)"], ["(v6)"]]);
  for (let i = 0; i < 1000000; i++) {
    dataSource.push([["name" + i], [i%17], [i%19], [" some str "+(i%5*10000)], ["-----"], ["====="], ["==="]]);
  }

  return (
    <StyledFullScreenDemo>
      <StickyTable dataSource={dataSource} fixedColCount={1} fixedRowCount={2}>
        <StickyColumn name={"name"} width={200} />
        <StickyColumn name={"column1"} width={300} StyledCell={StyledCellCustom}/>
        <StickyColumn name={"column2"} width={100} />
        <StickyColumn name={"column3"} width={80} />
        <StickyColumn name={"column4"} width={650} />
        <StickyColumn name={"column5"} width={650} />
        <StickyColumn name={"column6"} width={650} />
      </StickyTable>
    </StyledFullScreenDemo>
  );
}

export default App;

Usage 2

import React, { Component } from 'react'

import {DemoStickyTableApp} from "ente";
function App() {
  return <DemoStickyTableApp/>
}

export default App;

License

MIT © Mikhail Okhin