Reac-bootstrap-table2-editor

Trong loạt bài gồm hai phần này, bạn sẽ tìm hiểu về cách làm việc với dữ liệu dạng bảng trong React bằng cách sử dụng thành phần React Bootstrap Table2. Bạn sẽ có thể tạo các bảng có giao diện chuyên nghiệp và tinh vi mà không tốn nhiều công sức nhưng vẫn có thể tùy chỉnh mọi khía cạnh. Trong phần này, chúng ta sẽ tiếp tục cuộc hành trình bằng cách mở rộng hàng, phân trang, chỉnh sửa ô và tùy chỉnh nâng cao

Tổng quan

Đây là phần hai của loạt bài gồm hai phần về React Bootstrap Table2. Trong phần một, chúng ta đã tạo một ứng dụng React đơn giản bằng cách sử dụng ứng dụng tạo phản ứng và tạo bảng hiển thị bên dưới

Chúng tôi cũng đã điền dữ liệu vào bảng, làm việc với các cột, tạo kiểu cho bảng và các hàng đã chọn.  

Trong phần này, chúng ta sẽ tiếp tục cuộc hành trình bằng cách tạo các hàng mở rộng, cho phép chỉnh sửa ô và thực hiện một số tùy chỉnh nâng cao

Mở rộng hàng

Mở rộng hàng là một trong những tính năng thú vị nhất của React Bootstrap Table2. Khi hiển thị dữ liệu dạng bảng, bạn có thể muốn xem thêm dữ liệu trên một hoặc hai hàng, nhưng bạn có thể làm lộn xộn màn hình nếu hiển thị tất cả dữ liệu cho tất cả các hàng.  

Một tùy chọn là hiển thị chú giải công cụ, nhưng chú giải công cụ yêu cầu bạn di chuột qua khu vực mục tiêu và bạn chỉ có thể xem một chú giải công cụ tại một thời điểm. Mở rộng các hàng cho phép bạn hiển thị dữ liệu bổ sung cho mỗi hàng trong một loại ngăn kéo được mở rộng bao lâu tùy thích và bạn có thể thu gọn lại khi hoàn tất. Bạn có thể mở rộng bao nhiêu hàng tùy thích cùng một lúc. Đây là cách nó được thực hiện với React Bootstrap Table2

Hãy xem dữ liệu của chúng tôi.  

1

const product = [

2

  {id: 1, name: 'Headphone  Fusion', value: '100'},

3

  {id: 2, name: 'Headphone Beats', value: '80'},

4

  {id: 3, name: 'Headphone Modus', value: '70'},

5

  {id: 4, name: 'Headphone Jam', value: '100'}

const product = [

0

const product = [

1

const product = [

2

Chúng tôi sẽ sử dụng giá trị _

2

90 để chỉ định cách các hàng sẽ mở rộng khi nhấp chuột

1

const product = [

4

2

_______16

3

const product = [

8

4

2

0

5

2

2

const product = [

0

2

4

const product = [

1

2

6

2

7

2

8

2

9

  {id: 1, name: 'Headphone  Fusion', value: '100'},

0

Sau đó, chúng tôi thêm thuộc tính

2

90 vào bảng của mình

_______ 32 ___ 2 ___ 34 ___ 4 ___ 36 ___ 6 ___ 38 ___ 8 ___ 40 ___ 10 ___ 42 ___ 11 _____ 44 ___ 27 ___ 46 ___ 29 ___ 48 ___ 49 ___ 50

Đây là giao diện của bảng khi bạn nhấp vào một hàng

phân trang

Cho đến nay, chúng tôi chỉ hiển thị bốn hàng dữ liệu. Các bảng được thiết kế để hiển thị nhiều dữ liệu không nhất thiết phải vừa trên màn hình cùng một lúc. Đó là nơi phân trang xuất hiện. React Bootstrap Table2 hỗ trợ nhiều tùy chọn phân trang.  

Hãy điền dữ liệu bổ sung vào bảng của chúng ta bằng cách thêm một vài mục nhập, như được hiển thị bên dưới

1

const product = [

2

  {id: 1, name: 'Headphone  Fusion', value: '100'},

3

  {id: 2, name: 'Headphone Beats', value: '80'},

4

  {id: 3, name: 'Headphone Modus', value: '70'},

_______8

4

0

const product = [

0

4

2

const product = [

1

4

4

2

7

4

6

2

9

4

8

3

9

  {id: 3, name: 'Headphone Modus', value: '70'},

0

  {id: 3, name: 'Headphone Modus', value: '70'},

1

  {id: 3, name: 'Headphone Modus', value: '70'},

2

  {id: 3, name: 'Headphone Modus', value: '70'},

3

  {id: 3, name: 'Headphone Modus', value: '70'},

4

  {id: 3, name: 'Headphone Modus', value: '70'},

5

  {id: 3, name: 'Headphone Modus', value: '70'},

6

  {id: 3, name: 'Headphone Modus', value: '70'},

7

const product = [

2

Bây giờ hãy triển khai phân trang trên bảng của chúng ta. Trước tiên, hãy sử dụng NPM để cài đặt gói 

2

92

1

5

0

Tiếp theo, hãy mở Ứng dụng. js và nhập hàm 

2

93 

1

5

2

Tùy chỉnh phân trang bằng cách khai báo các cấu hình sau

1

5

4

2

5

6

3

5

8

4

  {id: 4, name: 'Headphone Jam', value: '100'}

0

5

  {id: 4, name: 'Headphone Jam', value: '100'}

2

const product = [

0

  {id: 4, name: 'Headphone Jam', value: '100'}

4

const product = [

1

  {id: 4, name: 'Headphone Jam', value: '100'}

6

Sau đó, chúng tôi áp dụng thuộc tính cho bảng, như được hiển thị bên dưới

1

  {id: 4, name: 'Headphone Jam', value: '100'}

8

2

  {id: 1, name: 'Headphone  Fusion', value: '100'},

4

3

  {id: 1, name: 'Headphone  Fusion', value: '100'},

6

4

  {id: 1, name: 'Headphone  Fusion', value: '100'},

8

5

3

0

const product = [

0

const product = [

08

const product = [

1

3

4

2

7

3

8

2

9

const product = [

14

3

9

const product = [

16

  {id: 3, name: 'Headphone Modus', value: '70'},

1

  {id: 3, name: 'Headphone Modus', value: '70'},

3

const product = [

19

  {id: 3, name: 'Headphone Modus', value: '70'},

5

const product = [

21

Bảng sẽ được hiển thị bắt đầu từ trang đầu tiên và sẽ hiển thị năm mục trên mỗi trang

chỉnh sửa ô

Một hình thức thao tác dữ liệu khác là chỉnh sửa tại chỗ [một. k. a. chỉnh sửa ô]. Chỉnh sửa ô có thể được kích hoạt bằng một lần nhấp hoặc nhấp đúp. Để bật thuộc tính này, trước tiên hãy cài đặt 

2

94

1

____123

Sau đó nhập nó ở đầu Ứng dụng. js

1

____125

2

const product = [

27

Đây là cách bạn bật tính năng chỉnh sửa ô trên bảng

1

  {id: 4, name: 'Headphone Jam', value: '100'}

8

2

const product = [

31

3

const product = [

33

4

const product = [

35

5

const product = [

37

const product = [

0

const product = [

39

const product = [

1

const product = [

41

2

7

const product = [

43

2

9

3

9

const product = [

46

Bạn cũng có thể chỉ định các hàng và hàm móc không thể chỉnh sửa. Ví dụ: mã bên dưới hạn chế chỉnh sửa ô trên hàng 3

1

  {id: 4, name: 'Headphone Jam', value: '100'}

8

2

const product = [

31

3

const product = [

33

4

const product = [

35

5

const product = [

37

const product = [

0

const product = [

39

const product = [

1

const product = [

41

2

7

const product = [

62

2

9

const product = [

64

3

9

const product = [

66

  {id: 3, name: 'Headphone Modus', value: '70'},

1

const product = [

68

  {id: 3, name: 'Headphone Modus', value: '70'},

3

const product = [

70

  {id: 3, name: 'Headphone Modus', value: '70'},

5

const product = [

70

  {id: 3, name: 'Headphone Modus', value: '70'},

7

const product = [

74__

  {id: 3, name: 'Headphone Modus', value: '70'},

175________ 175

Xuất dữ liệu của bạn

Đôi khi, xem dữ liệu của bạn trong giao diện người dùng web là không đủ và bạn cần lấy dữ liệu của mình và cung cấp dữ liệu đó cho các công cụ khác. Nhập thuộc tính 

2

95 [và tên tệp tùy chọn] và một nút xuất được thêm vào bảng. Khi bạn nhấp vào nút, nó cho phép bạn lưu dữ liệu của mình vào tệp CSV

Cài đặt 

2

96

1

const product = [

79

Tính năng xuất khả dụng thông qua giá đỡ

2

95 trong trình bao bọc

2

98. Để hiển thị và cho phép xuất CSV, hãy bọc 

2

99 trong một 

2

98

1

const product = [

81

2

3

const product = [

84

4

5

const product = [

87

const product = [

0

const product = [

1

const product = [

90

2

7

const product = [

92

2

9

const product = [

94

3

9

const product = [

96

  {id: 3, name: 'Headphone Modus', value: '70'},

1

const product = [

98

  {id: 3, name: 'Headphone Modus', value: '70'},

3

2

00

  {id: 3, name: 'Headphone Modus', value: '70'},

5

2

02

  {id: 3, name: 'Headphone Modus', value: '70'},

7

2

04

const product = [

75

2

06

const product = [

76

2

08

2

09

2

10

2

11

2

12

2

13

2

14

2

15

2

16

2

17

2

18

2

19

2

20

Tìm kiếm bảng

Thuộc tính này hoạt động giống như tính năng Xuất. Trước tiên, hãy nhập thuộc tính 

  {id: 1, name: 'Headphone  Fusion', value: '100'},

01, kích hoạt thuộc tính đó trên 

  {id: 1, name: 'Headphone  Fusion', value: '100'},

02 và bọc

  {id: 1, name: 'Headphone  Fusion', value: '100'},

03 với tư cách là phần tử con của 

2

98

1

2

22

2

2

24

3

4

const product = [

84

5

2

29

const product = [

0

const product = [

1

2

32

2

7

2

34

2

9

2

36

3

9

2

38

  {id: 3, name: 'Headphone Modus', value: '70'},

1

2

40

  {id: 3, name: 'Headphone Modus', value: '70'},

3

2

42

  {id: 3, name: 'Headphone Modus', value: '70'},

5

2

44

  {id: 3, name: 'Headphone Modus', value: '70'},

7

2

46

const product = [

75

2

48

const product = [

76

2

50

2

09

2

52

2

11

2

54

2

13

2

56

2

15

2

04

2

17

2

06

2

19

2

62

2

63

2

64

2

65

2

66

2

67

2

10

2

69

2

70

2

10

2

72

2

73

2

74

2

75

2

76

2

77

2

78

2

79

2

80

2

81

2

82

2

14

2

84

2

16

2

86

2

87

2

88

2

89

Tóm lược

Chúng tôi đã đề cập đến rất nhiều tài liệu trong hướng dẫn này, nhưng React Bootstrap Table2 còn nhiều hơn thế nữa. Thực tế mọi khía cạnh của bảng có thể được tùy chỉnh. Đọc tài liệu đầy đủ về cách tùy chỉnh bảng

Dưới đây là tất cả các tính năng được cung cấp bởi React Bootstrap Table2

• tùy chỉnh hàng
• tùy chỉnh cột
• sắp xếp bàn
• tìm kiếm bảng
• lựa chọn hàng
• bộ lọc cột
• chỉnh sửa ô
• phân trang
• hàng có thể mở rộng
• lớp phủ
• bàn từ xa

Phần kết luận

React Bootstrap Table2 tạo ra một cú đấm mạnh mẽ. Nó cung cấp một giao diện người dùng dễ chịu để hiển thị, tìm kiếm và thao tác dữ liệu dạng bảng ngay lập tức. API rất nhất quán—có thể bật các tính năng chính bằng cách chỉ định một thuộc tính đơn giản và tùy ý tùy chỉnh với các thuộc tính bổ sung thường có thể là các hàm động. Mặc dù hành vi mặc định và cấu hình cơ bản sẽ làm hài lòng hầu hết người dùng, nhưng nếu bạn cần các tính năng và tùy chỉnh nâng cao hơn, tài liệu chính thức có rất nhiều ví dụ về cách thực hiện