Fucking React Table

A react table component with fucking difficult features, including

• Virtualized rows with fucking native table elements
• Sticky header
• Freeze column
• ~~Placeholder~~(WIP)
• ~~Sticky horizontal scrollbar~~(WIP)
• ~~Resizable column~~(WIP)

for both fit-content height table and fixed height table.

Playground

Why

• Why using native table element?

  Because it is fucking semantic and elegant.

• Why reinventing the wheel?

  Considering sticky headers or freeze columns, I think reinventing is fucking more efficient than reusing.

• Why the project is named fucking-react-table?

  I originally named it react-virtual-table, but this name was fucking registered. The package even seems like a fucking useless hello world project. So I just give a fucking name.

Installation

npm install --save fucking-react-table

Quick Start

import FuckTable from 'fucking-react-table'

const data = [
  { id: 'a', value: 'Apple' },
  { id: 'b', value: 'Banana' },
]
const Tr = FuckTable.Tr
const Th = FuckTable.Th
const Td = FuckTable.Td

return (
  <FuckTable
    data={data}
    headerRowHeight={60}
    rowHeight={80}
    renderHeader={() => (
      <Tr>
        <Th cellWidth={100}>ID</Th>
        <Th cellWidth={150}>Fruit</Th>
      </Tr>
    )}
    renderRow={row => (
      <Tr key={row.id}>
        <Td cellWidth={100}>{row.id}</Td>
        <Td cellWidth={150}>{row.value}</Td>
      </Tr>
    )}
  />
)

Custom Styling

import FuckTable from 'fucking-react-table'
import styled from 'styled-components'

const Table = styled(FuckTable)`
  background-color: #26282b;
`

const Tr = styled(FuckTable.Tr)`
  background-color: rgb(53, 55, 58);
`

const Th = styled(FuckTable.Th)`
  background-color: rgb(62, 63, 66);
  color: rgb(156, 157, 158);
`

const Td = styled(FuckTable.Td)`
  background-color: rgb(53, 55, 58);
  color: #ffffff;
`

Props

FuckTable

| prop name | type | required | default | description | | --------- | ---- | -------- | ------- | ----------- | | data | array | yes | - | Data source of table rows. Each row will be passed as argument into renderRow. | | headerRowHeight | number | yes | - | Fixed row height of table header. Table header is not virtualized and is always rendered. | | rowHeight | number | yes | - | Fixed row height of table row. | | columnCount | number | conditional | undefined | If your column count will change during runtime, you must pass current column count. This prop is only for detecting width changing and won't affect any other table behaviors. | | maxHeight | number | optional | -1 | Set a fixed max height value (in pixel). If maxHeight is negative (default to -1), the table will fit its height to contents. | | throttleWait | number | optional | 16 | Throttle wait interval in milliseconds for restoring virtualized table rows. Default to 16ms, which is about 60fps (1000ms / 60). | preRenderRowCount | number | optional | 0 | Set how many margin rows should be pre-render before they are displayed in viewport. | | globalStickyHeader | bool | optional | false | Toggle sticky header when global page scrolls | | localStickyHeader | bool | conditional | false | Required when rowHeight is set. Toggle sticky header when table container scrolls. | | enableStickyHeaderShadow | bool | optional | true | Toggle scroll shadow of sticky header. | | enableFreezeColumnShadow | bool | optional | true | Toggle scroll shadow of frozen column. | | freezeColumnShadowLeftOffset | number | conditional | null | Required when enableFreezeColumnShadow is true. This prop decides the x-axis position of shadow. | | renderHeader | func | optional | () => {} | A render function for table head section. | | renderRow | func | optional | () => {} | A render function for table body section. |

FuckTable.Tr

No props.

FuckTable.Th

| prop name | type | required | default | description | | --------- | ---- | -------- | ------- | ----------- | | cellWidth | number | yes | - | Fixed value in px to decide the width of current FuckTable.Th | | freezeLeftOffset | number | undefined | conditional | undefined | If you want to freeze columns, this prop sets the freeze left offset in px. You should set the same offset to FuckTable.Td for the same column. |

FuckTable.Td

| prop name | type | required | default | description | | --------- | ---- | -------- | ------- | ----------- | | cellWidth | number | yes | - | Fixed value in px to decide the width of current FuckTable.Td | | freezeLeftOffset | number | undefined | conditional | undefined | If you want to freeze columns, this prop sets the freeze left offset in px. You should set the same offset to FuckTable.Th for the same column. |

Development

npm start

Storybook

Launch local storybook

yarn storybook

Deploy to gh-pages

yarn deploy-storybook

Changelog

0.1.1

Reduce bundle size by removing unnecessary dependencies

0.1.0

Initial release with following features:

• virtualized rows
• sticky header
• freeze column