resiq-table
v1.1.24
Published
Material tables with custom styling
Downloads
7
Maintainers
Readme
Key features
- Actions
- Component overriding
- Custom column rendering
- Detail Panel
- Editable
- Export
- Filtering
- Grouping
- Localization
- Remote Data
- Search
- Selection
- Sorting
- Styling
- Tree Data
Installation
1.Install package
To install resiq-table with npm
:
npm install resiq-table --save
npm install @material-ui/core --save
To install material-table with yarn
:
yarn add resiq-table
yarn add @material-ui/core
2.Add material icons
There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table icons
prop.
HTML
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
OR
Import Material icons
Icons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.
To install @material-ui/icons with npm
:
npm install @material-ui/icons --save
To install @material-ui/icons with yarn
:
yarn add @material-ui/icons
If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:
Usage
Here is a basic example of using material-table within a react application.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ResiqMaterialTable from "resiq-table";
class App extends Component {
render() {
return (
<div style={{ maxWidth: "100%" }}>
<ResiqMaterialTable
columns={[
{ title: "Adı", field: "name" },
{ title: "Soyadı", field: "surname" },
{ title: "Doğum Yılı", field: "birthYear", type: "numeric" },
{
title: "Doğum Yeri",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
]}
title="Demo Title"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("react-div"));
## License
This project is licensed under the terms of the [MIT license](/LICENSE).