{"id":20237451,"url":"https://github.com/react-widget/table-basic","last_synced_at":"2026-05-10T11:43:39.948Z","repository":{"id":57347707,"uuid":"274183260","full_name":"react-widget/table-basic","owner":"react-widget","description":"https://react-widget.github.io/table-basic/","archived":false,"fork":false,"pushed_at":"2020-06-27T13:34:08.000Z","size":254,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T08:00:44.736Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-widget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-22T16:02:57.000Z","updated_at":"2020-06-27T13:30:43.000Z","dependencies_parsed_at":"2022-08-28T01:40:16.665Z","dependency_job_id":null,"html_url":"https://github.com/react-widget/table-basic","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftable-basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftable-basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftable-basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftable-basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widget","download_url":"https://codeload.github.com/react-widget/table-basic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241681835,"owners_count":20002386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T08:27:00.845Z","updated_at":"2026-05-10T11:43:34.911Z","avatar_url":"https://github.com/react-widget.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-widget-table-basic\n\nTable基础组件\n\n\n## 安装\n\n```\nnpm install --save react-widget-table-basic\n```\n\n## 使用\n\n[![Edit react-widget-table-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-widget-table-basic-jujcd?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```js\nimport TableBasic from 'react-widget-table-basic';\nimport 'react-widget-table-basic/style';\n\nconst dataSource = [\n  {\n    key: '1',\n    name: '胡彦斌',\n    age: 32,\n    address: '西湖区湖底公园1号',\n  },\n  {\n    key: '2',\n    name: '胡彦祖',\n    age: 42,\n    address: '西湖区湖底公园1号',\n  },\n];\n\nconst columns = [\n  {\n    title: '姓名',\n    dataIndex: 'name',\n    key: 'name',\n  },\n  {\n    title: '年龄',\n    dataIndex: 'age',\n    key: 'age',\n  },\n  {\n    title: '住址',\n    dataIndex: 'address',\n    key: 'address',\n  },\n];\n\n\u003cTableBasic data={dataSource} columns={columns} /\u003e;\n\n```\n\n### Interfaces\n\n```ts\nexport interface TableBasicProps\u003cT = DataType\u003e {\n    prefixCls?: string;\n    className?: string;\n    style?: React.CSSProperties;\n    columns: Column\u003cT\u003e[];\n    data: T[];\n    tableLayout?: \"auto\" | \"fixed\";\n    getHeaderRowProps?: (props: RenderProps, columns: TCell\u003cColumn\u003cT\u003e\u003e[], index: number) =\u003e RenderProps;\n    getRowProps?: (props: RenderProps, data: T, index: number) =\u003e RenderProps;\n    getRowKey: (data: T, index: number) =\u003e React.Key;\n    getRowClassName?: (data: T, index: number) =\u003e string;\n    showHeader?: boolean;\n    showBody?: boolean;\n    emptyText?: React.ReactNode;\n    emptyRender(props: RenderProps): React.ReactNode;\n    tableRender(props: RenderProps): React.ReactNode;\n    headerRender: (props: RenderProps) =\u003e React.ReactElement | null;\n    headerRowRender: (props: RenderProps) =\u003e React.ReactElement | null;\n    headerCellRender: (props: RenderProps) =\u003e React.ReactElement | null;\n    bodyRender: (props: RenderProps) =\u003e React.ReactElement | null;\n    bodyRowRender: (props: RenderProps) =\u003e React.ReactElement | null;\n    bodyCellRender: (props: RenderProps) =\u003e React.ReactElement | null;\n}\nexport interface TableBasicState\u003cT = DataType\u003e {\n    columns: Column\u003cT\u003e[];\n    flattenColumns: Column\u003cT\u003e[];\n    columnStore: TreeStore;\n    leafColumns: Column\u003cT\u003e[];\n    computedColumn: TCell\u003cColumn\u003cT\u003e\u003e[][];\n}\n\nexport declare type DataType = Record\u003cany, any\u003e;\nexport interface Column\u003cT = DataType\u003e {\n    title?: React.ReactNode;\n    dataIndex?: string | number;\n    width?: string | number;\n    minWidth?: string | number;\n    maxWidth?: string | number;\n    className?: string;\n    key?: string | number;\n    align?: \"left\" | \"center\" | \"right\";\n    ellipsis?: boolean;\n    children?: Column\u003cT\u003e[];\n    render?: (text: any, data: T, index: number) =\u003e React.ReactNode;\n    headerRender?: (text: any, column: Column\u003cT\u003e, index: number) =\u003e React.ReactNode;\n    getCellProps?: (props: RenderProps, data: T, index: number) =\u003e RenderProps;\n    getHeaderCellProps?: (props: RenderProps, column: Column\u003cT\u003e, index: number) =\u003e RenderProps;\n}\nexport interface RenderProps extends React.AllHTMLAttributes\u003cany\u003e {\n    key?: React.Key;\n    ref?: React.Ref\u003cany\u003e;\n    children: React.ReactNode;\n    [x: string]: any;\n}\n\n```\n\n### defaultProps\n\n```js\n{\n\tprefixCls: \"rw-table\",\n\ttableLayout: \"auto\",\n\tcolumns: [],\n\tdata: [],\n\tshowHeader: true,\n\tshowBody: true,\n\n\tgetRowKey(data, index) {\n\t\treturn data[\"key\"] ?? index;\n\t},\n\n\temptyText: \"No Data.\",\n\n\temptyRender(props) {\n\t\treturn \u003cdiv {...props} /\u003e;\n\t},\n\ttableRender(props) {\n\t\treturn \u003ctable {...props} /\u003e;\n\t},\n\theaderRender(props) {\n\t\treturn \u003cthead {...props} /\u003e;\n\t},\n\theaderRowRender(props) {\n\t\treturn \u003ctr {...props} /\u003e;\n\t},\n\theaderCellRender(props) {\n\t\treturn \u003cth {...props} /\u003e;\n\t},\n\tbodyRender(props) {\n\t\treturn \u003ctbody {...props} /\u003e;\n\t},\n\tbodyRowRender(props) {\n\t\treturn \u003ctr {...props} /\u003e;\n\t},\n\tbodyCellRender(props) {\n\t\treturn \u003ctd {...props} /\u003e;\n\t},\n}\n```\n\n### 基础样式\n\n```css\n.rw-table {\n    width: 100%;\n    table-layout: auto;\n    text-align: left;\n    border-style: solid;\n    border-width: 1px 0 0 1px;\n    border-color: #e8e8e8;\n}\n\n.rw-table-head-cell {\n    padding: 4px 10px;\n    background-color: #fafafa;\n    border-color: #e8e8e8;\n    border-style: solid;\n    border-width: 0 1px 1px 0;\n    line-height: 28px;\n    color: rgba(0, 0, 0, 0.85);\n    overflow-wrap: break-word;\n}\n\n.rw-table-body-cell {\n    padding: 4px 10px;\n    border-color: #e8e8e8;\n    border-style: solid;\n    border-width: 0 1px 1px 0;\n    line-height: 28px;\n    background-color: #fff;\n    overflow-wrap: break-word;\n}\n\n.rw-table-cell-ellipsis {\n    overflow: hidden;\n    white-space: nowrap;\n    word-wrap: normal;\n    text-overflow: ellipsis;\n}\n\n.rw-table-empty-text {\n    background-color: #fff;\n    text-align: center;\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Ftable-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widget%2Ftable-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Ftable-basic/lists"}