• Stars
    star
    1,183
  • Rank 39,544 (Top 0.8 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Table

rc-table

React table component with useful functions.

NPM version dumi build status Test coverage Dependencies DevDependencies npm download bundle size

install

rc-table

Development

npm install
npm start

Example

https://table.react-component.now.sh/

Usage

import Table from 'rc-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 200,
  },
  {
    title: 'Operations',
    dataIndex: '',
    key: 'operations',
    render: () => <a href="#">Delete</a>,
  },
];

const data = [
  { name: 'Jack', age: 28, address: 'some where', key: '1' },
  { name: 'Rose', age: 36, address: 'some where', key: '2' },
];

React.render(<Table columns={columns} data={data} />, mountNode);

API

Properties

Name Type Default Description
tableLayout auto | fixed auto | fixed for any columns is fixed or ellipsis or header is fixed https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
prefixCls String rc-table
className String additional className
id String identifier of the container div
useFixedHeader Boolean false whether use separator table for header. better set width for columns
scroll Object {x: false, y: false} whether table can be scroll in x/y direction, x or y can be a number that indicated the width and height of table body
expandable Object Config expand props
expandable.defaultExpandAllRows Boolean false Expand All Rows initially
expandable.defaultExpandedRowKeys String[] [] initial expanded rows keys
expandable.expandedRowKeys String[] current expanded rows keys
expandable.expandedRowRender Function(recode, index, indent, expanded):ReactNode Content render to expanded row
expandable.expandedRowClassName Function(recode, index, indent):string get expanded row's className
expandable.expandRowByClick boolean Support expand by click row
expandable.expandIconColumnIndex Number 0 The index of expandIcon which column will be inserted when expandIconAsCell is false
expandable.expandIcon props => ReactNode Customize expand icon
expandable.indentSize Number 15 indentSize for every level of data.i.children, better using with column.width specified
expandable.rowExpandable (record) => boolean Config row support expandable
expandable.onExpand Function(expanded, record) function to call when click expand icon
expandable.onExpandedRowsChange Function(expandedRows) function to call when the expanded rows change
expandable.fixed String | Boolean - this expand icon will be fixed when table scroll horizontally: true or left or right and expandIconColumnIndex need to stay first or last
rowKey string or Function(record, index):string 'key' If rowKey is string, record[rowKey] will be used as key. If rowKey is function, the return value of rowKey(record, index) will be use as key.
rowClassName string or Function(record, index, indent):string get row's className
rowRef Function(record, index, indent):string get row's ref key
data Object[] data record array to be rendered
onRow Function(record, index) Set custom props per each row.
onHeaderRow Function(record, index) Set custom props per each header row.
showHeader Boolean true whether table head is shown
title Function(currentData) table title render function
footer Function(currentData) table footer render function
emptyText React.Node or Function No Data Display text when data is empty
columns Object[] The columns config of table, see table below
components Object Override table elements, see #171 for more details
sticky boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window | HTMLElement } false stick header and scroll bar
summary (data: readonly RecordType[]) => React.ReactNode - summary attribute in table component is used to define the summary row.

Column Props

Name Type Default Description
key String key of this column
className String className of this column
colSpan Number thead colSpan of this column
title React Node title of this column
dataIndex String display field of the data record
width String | Number width of the specific proportion calculation according to the width of the columns
fixed String | Boolean this column will be fixed when table scroll horizontally: true or 'left' or 'right'
align String specify how cell content is aligned
ellipsis Boolean specify whether cell content be ellipsized
rowScope 'row' | 'rowgroup' Set scope attribute for all cells in this column
onCell Function(record, index) Set custom props per each cell.
onHeaderCell Function(record) Set custom props per each header cell.
render Function(value, row, index) The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan

Summary Props

Table.Summary

Name Type Default Description
key String key of this summary
fixed boolean | 'top' | 'bottom' - true fixes the summary row at the bottom of the table. top fixes the summary row at the top of the table, while bottom fixes it at the bottom. undefined or false makes the summary row scrollable along with the table.

Table.Summary.Row

Name Type Default Description
key String key of this summary
className String - className of this summary row
style React.CSSProperties - style of this summary row
onClick (e?: React.MouseEvent<HTMLElement>) => void - The onClick attribute in Table.Summary.Row component can be used to set a click event handler for the summary row.

License

rc-table is released under the MIT license.

More Repositories

1

slider

React Slider
JavaScript
2,962
star
2

form

React High Order Form Component(web & react-native)
JavaScript
1,799
star
3

calendar

React Calendar
JavaScript
1,681
star
4

tree

React Tree
TypeScript
1,113
star
5

field-form

⚡️ React Performance First Form Component
TypeScript
914
star
6

tooltip

React Tooltip
TypeScript
896
star
7

select

React Select
TypeScript
854
star
8

upload

React Upload
TypeScript
766
star
9

progress

React Progress Bar
TypeScript
678
star
10

animate

anim react element easily
JavaScript
675
star
11

menu

React Menu
TypeScript
655
star
12

virtual-list

🧾 React Virtual List Component which worked with animation
TypeScript
645
star
13

pagination

React Pagination
TypeScript
629
star
14

util

Common Utils For React Component
TypeScript
627
star
15

tabs

React Tabs
TypeScript
540
star
16

queue-anim

Animate React Component in queue
TypeScript
476
star
17

time-picker

React TimePicker
JavaScript
463
star
18

dialog

React Dialog
TypeScript
424
star
19

color-picker

React ColorPicker
TypeScript
422
star
20

m-date-picker

React Mobile DatePicker(web & react-native)
TypeScript
400
star
21

react-component.github.io

docs and site of react-component
HTML
378
star
22

drawer

React Drawer
TypeScript
372
star
23

tween-one

Animate One React Element
TypeScript
370
star
24

notification

React Notification
TypeScript
364
star
25

trigger

Abstract React Trigger
TypeScript
345
star
26

collapse

React Collapse / Accordion
TypeScript
319
star
27

steps

React Steps
TypeScript
311
star
28

scroll-anim

Animate Scroll React Component
JavaScript
301
star
29

input-number

React Input Number
TypeScript
296
star
30

tree-select

React Tree Select
TypeScript
287
star
31

picker

📅 All Date Pickers you need.
TypeScript
265
star
32

m-picker

React Mobile Picker(web & react-native)
TypeScript
247
star
33

swipeout

React Swipeout(web & react-native)
TypeScript
213
star
34

rc-tools

Tools For React Component
JavaScript
205
star
35

cascader

cascade select in one box
TypeScript
198
star
36

switch

React Switch
JavaScript
187
star
37

image

🖼 React Image Component
TypeScript
185
star
38

banner-anim

Animate Banner React Component
JavaScript
170
star
39

m-pull-to-refresh

React Mobile Pull To Refresh
TypeScript
164
star
40

dropdown

React Dropdown
TypeScript
163
star
41

texty

React Text Animate
TypeScript
154
star
42

resize-observer

👓 Resize observer for React
JavaScript
153
star
43

m-tabs

React Mobile Tabs Component (web & react-native)
TypeScript
139
star
44

checkbox

React Checkbox
TypeScript
130
star
45

motion

⛷ CSS Animation for React
TypeScript
120
star
46

gesture

Support gesture for react component.
TypeScript
103
star
47

rate

React Rate
JavaScript
91
star
48

footer

🐾 Pretty Footer react component used in ant.design
JavaScript
87
star
49

form-validation

This project is deprecated, you can try https://github.com/react-component/form
JavaScript
86
star
50

m-list-view

ReactNative ListView Web Port
JavaScript
85
star
51

align

Abstract React Align
TypeScript
81
star
52

mentions

React Mentions
TypeScript
67
star
53

rn-packager

Standalone ReactNative Packager
JavaScript
66
star
54

generator-rc

yeoman generator for react component
JavaScript
58
star
55

editor-core

a draft-js based editor
TypeScript
56
star
56

m-drawer

React Drawer
JavaScript
54
star
57

cropping

image cropping
TypeScript
54
star
58

editor-mention

React Mention
JavaScript
53
star
59

m-cascader

React Mobile Cascader Component(web and react-native)
TypeScript
51
star
60

m-dialog

React Mobile Dialog(web & react-native)
TypeScript
45
star
61

spider

React Tree Diagrams
JavaScript
44
star
62

overflow

📦 Auto collapse box util component
TypeScript
42
star
63

css-transition-group

standalone CSSTransitionGroup for React.addons.CSSTransitionGroup
JavaScript
38
star
64

m-calendar

React Mobile Calendar Component (web)
TypeScript
36
star
65

m-feedback

:active pseudo-class with react for mobile
TypeScript
36
star
66

input

React Input Component
TypeScript
35
star
67

tour

TypeScript
30
star
68

pager

React Pager
JavaScript
26
star
69

m-notification

JavaScript
23
star
70

dropzone

React Dropzone
JavaScript
23
star
71

textarea

React Textarea
TypeScript
22
star
72

radio

[DEPRECATED] React Radio
CSS
19
star
73

m-input-number

input-number mobile ui component for react (web & react-native)
TypeScript
17
star
74

portal

TypeScript
16
star
75

touchable

React Touchable Component
TypeScript
16
star
76

rc-server

This project is deprecated, use rc-tools run server
JavaScript
15
star
77

gulp-jsx2example

Compile JSX file to HTML (react demo)
JavaScript
13
star
78

cascade-select

React CascadeSelect
JavaScript
13
star
79

icon-anim

Icon cutover or morph animate React Element
JavaScript
12
star
80

m-select-list

React Mobile Select List Component
JavaScript
12
star
81

segmented

React Segmented Controls
TypeScript
12
star
82

rc-test

test react component
JavaScript
11
star
83

mobile

ant design mobile components
TypeScript
10
star
84

m-tooltip

React Tooltip for mobile
TypeScript
8
star
85

context

TypeScript
7
star
86

rn-tools

tools for react-native
JavaScript
7
star
87

rn-core

Standalone ReactNative Framework
Objective-C
6
star
88

m-trigger

React Trigger Component for mobile
JavaScript
6
star
89

record

Record audio from microphone
JavaScript
5
star
90

.github

5
star
91

RNPlayground

react-native playground container
Objective-C
5
star
92

mutate-observer

TypeScript
5
star
93

editor-plugin-emoji

HTML
4
star
94

m-steps

React Steps for mobile
CSS
4
star
95

editor-plugin-basic-style

TypeScript
3
star
96

mini-decimal

TypeScript
3
star
97

editor-utils

editor utilities
TypeScript
2
star
98

father-plugin

father plugin for all react-component project
TypeScript
1
star
99

qrcode

TypeScript
1
star
100

editor-plugin-image

TypeScript
1
star