https://github.com/reactabular/reactabular-semantic-ui
Reactabular wrapper for semantic-ui
https://github.com/reactabular/reactabular-semantic-ui
Last synced: 9 months ago
JSON representation
Reactabular wrapper for semantic-ui
- Host: GitHub
- URL: https://github.com/reactabular/reactabular-semantic-ui
- Owner: reactabular
- License: mit
- Created: 2017-03-30T11:02:26.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-11T15:59:01.000Z (about 8 years ago)
- Last Synced: 2025-04-24T14:46:10.060Z (9 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# reactabular-semantic-ui - Reactabular wrapper for semantic-ui-react
Helper for Reactabular to use Semantic-Ui-React table with it.
Should be able to handle any properties specified in Semantic-UI-React documentation.
http://react.semantic-ui.com/collections/table
## Example
```jsx
import React, { Component } from "react";
import componentsWrapper from 'reactabular-semantic-ui';
import * as Table from "reactabular-table";
import "semantic-ui-css/semantic.min.css";
const rows = [
{
id: 100,
name: 'John'
},
{
id: 101,
name: 'Jack'
}
];
const columns = [
{
property: 'name',
header: {
label: 'Name'
}
}
];
// Define properties that you wnat to pass to corresponding components
// All of those are optional
const combinedProps = {
//Semantic UI React component props in object format
tableProps: {
striped: true,
color: "red"
},
//Semantic UI React component props in object format
headerProps: {
fullWidth: true
},
//Header row props if you want to do something special there
headerRowProps: {},
//Semantic UI React component props in object format
headerCellProps: {
textAlign: "center"
},
//Semantic UI React component props in object format
bodyProps: {
className: "customtablebodyclass"
},
//Semantic UI React component props in object format
bodyRowProps: {
positive: true
},
//Semantic UI React component props in object format
bodyCellProps: {
textAlign: "left",
positive: true,
icon: "folder",
singleLine: true
}
};
//Set your custom props
//componentsWrapper is possible to call without any parameters
const componentsWithProps = componentsWrapper(combinedProps)
const SemanticReactabular = () => {
return (
);
};
```
## License
MIT. See LICENSE for details.