Fucking-react-table NPM

npm.io

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

@infinitebrahmanuniverse/nolb-fuc @everything-registry/sub-chunk-1708

0.1.1

5 years ago

0.1.0

5 years ago